.typing-game-shell{width:100%;max-width:1540px;margin:0 auto;color:#d9f5ec;font-family:"Courier New",ui-monospace,monospace}
.typing-game-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px;margin-bottom:18px}
.typing-game-hero,.typing-game-rules{position:relative;overflow:hidden;border:2px solid #2c6471;border-radius:8px;background:#071923;box-shadow:0 16px 40px rgba(3,24,35,.16)}
.typing-game-hero{min-height:300px;padding:34px;background:linear-gradient(145deg,#06151f 0%,#0a2b38 58%,#0b4c51 100%)}
.typing-game-hero:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(146,249,204,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(146,249,204,.1) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.typing-game-hero>*{position:relative;z-index:1}
.typing-game-eyebrow{color:#70dfb2;font-size:11px;font-weight:900;letter-spacing:.16em}
.typing-game-hero h1{max-width:720px;margin:17px 0 12px;color:#f0fff8;font-family:"Courier New",monospace;font-size:clamp(29px,5vw,62px);font-weight:900;letter-spacing:-.08em;line-height:1.03;text-shadow:0 0 14px rgba(109,239,185,.2)}
.typing-game-hero p{max-width:660px;margin:0;color:#a3c8c1;font-size:13px;line-height:1.7}
.typing-game-hero .button{margin-top:25px;border-color:#72e2b1;color:#052018;background:#79e5b4;box-shadow:0 0 20px rgba(71,222,163,.18);font-family:inherit;font-weight:900}
.typing-game-rules{padding:22px;color:#a7c9c4;background:#0a202a}
.typing-game-rules h2{margin:0;color:#e4fff5;font-size:17px;letter-spacing:-.06em}
.typing-game-rules p{margin:9px 0 0;color:#80a7a5;font-size:11px;line-height:1.6}
.typing-game-rule-list{display:grid;gap:11px;margin:20px 0 0;padding:0;list-style:none}
.typing-game-rule-list li{display:flex;gap:10px;align-items:flex-start;font-size:11px;line-height:1.55}
.typing-game-rule-list b{display:grid;place-items:center;flex:0 0 auto;width:26px;height:26px;border:1px solid #3f8c85;border-radius:4px;color:#79e5b4;background:#092b32;font-size:11px}
.typing-game-shell.active{min-height:calc(100vh - 90px);padding-bottom:20px}
.typing-game-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:12px;padding:0 2px}
.typing-game-bar h1{margin:0;color:var(--navy);font-family:"Courier New",ui-monospace,monospace;font-size:clamp(20px,3vw,34px);font-weight:900;letter-spacing:-.09em;line-height:1.1}
.typing-game-bar p{margin:7px 0 0;color:var(--muted);font-family:var(--font,system-ui,sans-serif);font-size:12px;line-height:1.5}
.typing-game-bar .button{flex:0 0 auto;font-family:var(--font,system-ui,sans-serif)}
.typing-game-cabinet{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr);gap:12px;padding:10px;border:3px solid #244e5e;border-radius:10px;background:#061620;box-shadow:0 18px 45px rgba(5,27,39,.22)}
.typing-game-screen{position:relative;min-width:0;overflow:hidden;border:2px solid #397b7b;border-radius:4px;background:#071a25;box-shadow:inset 0 0 0 3px #0b2732,inset 0 0 35px rgba(29,217,159,.08)}
.typing-game-canvas-wrap{position:relative;min-width:0}
.typing-game-canvas{display:block;width:100%;height:auto;min-height:360px;aspect-ratio:16/10;image-rendering:pixelated;touch-action:none}
.typing-game-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:rgba(3,18,27,.77);text-align:center}
.typing-game-overlay[hidden]{display:none}
.typing-game-overlay-card{max-width:620px;padding:24px;border:2px solid #64d9ae;border-radius:5px;color:#dffff2;background:rgba(4,28,35,.94);box-shadow:0 0 35px rgba(49,219,157,.13)}
.typing-game-overlay-card h2{margin:0;color:#ecfff7;font-family:inherit;font-size:clamp(20px,3vw,34px);letter-spacing:-.08em;line-height:1.15}
.typing-game-overlay-card p{margin:10px 0 0;color:#9cc2b7;font-size:12px;line-height:1.65}
.typing-game-overlay-card .button{margin-top:16px;border-color:#76e8b6;color:#06241c;background:#76e8b6;font-family:inherit;font-weight:900}
.typing-game-panel{display:flex;min-height:0;flex-direction:column;border:2px solid #2d6270;border-radius:5px;color:#b5d8cf;background:#09212b}
.typing-game-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px;border-bottom:1px solid #25515d;background:#0b2b34}
.typing-game-panel-head strong{color:#dffff3;font-size:12px;letter-spacing:.08em}
.typing-game-panel-head span{color:#75dcae;font-size:11px;font-weight:900}
.typing-game-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:11px;border-bottom:1px solid #25515d}
.typing-game-stat{padding:9px;border:1px solid #285968;border-radius:4px;background:#071b25}
.typing-game-stat span{display:block;color:#739b9d;font-size:9px}
.typing-game-stat strong{display:block;margin-top:5px;color:#e0fff1;font-size:18px;line-height:1}
.typing-game-problem{padding:14px;border-bottom:1px solid #25515d}
.typing-game-problem-label{color:#6fdcaf;font-size:10px;font-weight:900;letter-spacing:.09em}
.typing-game-problem h2{margin:8px 0 0;color:#edfff6;font-size:17px;letter-spacing:-.07em;line-height:1.3}
.typing-game-problem p{margin:8px 0 0;color:#80a8a5;font-size:10px;line-height:1.55}
.typing-game-input-area{margin-top:auto;padding:13px;background:#071923}
.typing-game-input-label{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px;color:#83b8a8;font-size:10px;font-weight:900}
.typing-game-input-label span:last-child{color:#e5bd62}
.typing-game-input{width:100%;min-height:50px;padding:0 12px;border:2px solid #46847c;border-radius:4px;outline:0;color:#eafff5;background:#031219;font-family:inherit;font-size:17px;font-weight:900;letter-spacing:.02em;box-shadow:inset 0 0 14px rgba(47,203,149,.08)}
.typing-game-input:focus{border-color:#87efbd;box-shadow:0 0 0 3px rgba(119,235,180,.12),inset 0 0 14px rgba(47,203,149,.08)}
.typing-game-input.invalid{border-color:#ec8c68;animation:typing-shake .16s linear 2}
.typing-game-input:disabled{opacity:.55}
.typing-game-help{margin-top:8px;color:#6d9895;font-size:10px;line-height:1.5}
.typing-game-message{min-height:51px;margin:0 13px 12px;padding:10px;border-left:3px solid #3e746e;color:#a7c9bf;background:#071a23;font-size:10px;line-height:1.55}
.typing-game-message.good{border-color:#76e8b6;color:#bfffe1}.typing-game-message.bad{border-color:#ef896b;color:#ffc0ad}
.typing-game-controls{display:flex;flex-wrap:wrap;gap:7px;padding:0 13px 13px}
.typing-game-controls .button{flex:1;min-width:116px;font-family:var(--font,system-ui,sans-serif)}
.typing-game-controls .button.primary{font-family:inherit;font-weight:900}
.typing-game-results{display:grid;gap:12px;margin-top:13px;padding:16px;border:1px solid #2e6470;border-radius:5px;color:#cce8dd;background:#09212b}
.typing-game-results strong{color:#eafff5;font-size:16px}.typing-game-results p{margin:0;color:#8eb7ae;font-size:11px;line-height:1.5}
.typing-game-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.typing-game-result-grid div{padding:9px;border:1px solid #2e5d66;border-radius:4px;background:#071a23;text-align:center}.typing-game-result-grid b{display:block;color:#77e5b1;font-size:18px}.typing-game-result-grid span{display:block;margin-top:4px;color:#75999a;font-size:9px}
.typing-game-keyboard-note{margin-top:10px;color:#6c9793;font-size:10px;line-height:1.45}
@keyframes typing-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:980px){.typing-game-cabinet{grid-template-columns:minmax(0,1fr) minmax(250px,.52fr)}.typing-game-canvas{min-height:320px}}
@media(max-width:780px){.typing-game-intro{grid-template-columns:1fr}.typing-game-hero{min-height:270px;padding:25px}.typing-game-cabinet{grid-template-columns:1fr}.typing-game-panel{min-height:0}.typing-game-problem{order:-1}.typing-game-input-area{margin-top:0}.typing-game-canvas{min-height:300px}.typing-game-bar{align-items:flex-start}.typing-game-bar p{max-width:500px}}
@media(max-width:520px){.typing-game-hero h1{font-size:39px}.typing-game-hero p{font-size:12px}.typing-game-cabinet{padding:5px}.typing-game-canvas{min-height:255px}.typing-game-bar{display:block}.typing-game-bar .button{width:100%;margin-top:10px}.typing-game-problem h2{font-size:16px}.typing-game-input{min-height:54px;font-size:16px}.typing-game-result-grid{grid-template-columns:1fr 1fr}.typing-game-result-grid div:last-child{grid-column:1/-1}.typing-game-shell.active{padding-bottom:96px}}