:root{--bg-top: #1d2f43;--bg-mid: #2f5f73;--bg-bottom: #f4f2e6;--ink: #10212d;--panel: #fff7de;--panel-strong: #ffe7a8;--accent: #ff7b22;--accent-2: #00a6a6;--danger: #db2f36;--ok: #49a94f;--outline: #15242e}*{box-sizing:border-box}html,body,#app{margin:0;padding:0;width:100%;height:100%;min-height:100%;background:radial-gradient(circle at 15% 15%,#315f77 0 12%,transparent 13%),radial-gradient(circle at 82% 20%,#47697d 0 10%,transparent 11%),linear-gradient(180deg,var(--bg-top),var(--bg-mid) 50%,var(--bg-bottom));color:var(--ink);font-family:Trebuchet MS,Gill Sans,Noto Sans,sans-serif}.app-shell{display:grid;grid-template-rows:68vh 32vh;height:100vh;width:100vw}.top-panel{position:relative;overflow:hidden;border-bottom:5px solid var(--outline)}.game-mount{width:100%;height:100%}.overlay-layer{pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}.screen{pointer-events:auto}.card{width:min(780px,95%);max-height:92%;overflow:auto;background:linear-gradient(180deg,#fff7db,#f6e6bc);border:4px solid var(--outline);border-radius:18px;box-shadow:0 12px #0f1d27;padding:18px 20px}.card.compact{width:min(360px,92%);text-align:center}.hidden{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:clamp(2rem,3.8vw,3rem);letter-spacing:.02em}h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:10px}.button-stack{display:grid;gap:10px;margin-top:16px}button,select,input{font-family:inherit}button{border:3px solid var(--outline);border-radius:12px;background:#fef0c8;color:var(--ink);padding:10px 14px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 4px #1c2e3b}button:active{transform:translateY(2px);box-shadow:0 2px #1c2e3b}button.primary{background:linear-gradient(180deg,#ffb45c,var(--accent))}button:disabled{opacity:.6;cursor:not-allowed}label{display:grid;gap:6px;font-weight:700;margin:12px 0}select{border:3px solid var(--outline);border-radius:10px;padding:8px;font-size:1rem;background:#fffaf0}.inline-check{display:flex;align-items:center;gap:8px}.screen-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.lesson-list{display:grid;gap:10px;max-height:48vh;overflow:auto;padding-right:6px}.lesson-card{border:3px solid var(--outline);border-radius:12px;background:#fff7e2;padding:12px;display:grid;gap:6px}.lesson-card.locked{opacity:.75}.lesson-badge{display:inline-block;width:fit-content;border:2px solid var(--outline);border-radius:999px;font-weight:700;font-size:.82rem;padding:2px 10px;background:#d7d7d7}.lesson-card.open .lesson-badge{background:#b9f5c6}.hud{position:absolute;left:12px;right:12px;top:10px;z-index:5;display:grid;gap:8px;pointer-events:none}.hud-row{display:grid;grid-template-columns:repeat(8,minmax(90px,1fr));gap:8px}.hud-item{background:#09121ac7;color:#f8f7f1;border:2px solid #4f6f83;border-radius:10px;padding:4px 8px;display:grid;gap:2px}.hud-item span{font-size:.75rem;opacity:.88}.hud-item strong{font-size:1rem}.hud-lesson{width:fit-content;background:#070c11d1;color:#fff;border:2px solid #4f6f83;border-radius:999px;padding:6px 12px;font-weight:700}.bottom-panel{padding:10px 16px 14px;background:linear-gradient(180deg,#fbf1cf,#f0e2b8),repeating-linear-gradient(90deg,transparent,transparent 40px,rgba(0,0,0,.03) 40px,rgba(0,0,0,.03) 43px)}.keyboard-panel{height:100%;border:4px solid var(--outline);border-radius:16px;padding:10px;background:#fffaf0;display:grid;grid-template-rows:auto 1fr auto;gap:8px}.keyboard-panel.wrong-input{box-shadow:inset 0 0 0 3px #d94e56}.keyboard-info{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px}.info-chip{border:2px solid var(--outline);border-radius:10px;background:#fff;padding:6px 8px;display:grid}.info-chip-wide{grid-column:span 1}.chip-title{font-size:.74rem}.keyboard-grid{display:grid;gap:7px;align-content:center}.keyboard-row{display:flex;justify-content:center;gap:7px}.keyboard-key{width:clamp(34px,2.8vw,44px);aspect-ratio:1 / 1;border:2px solid var(--outline);border-radius:9px;display:grid;place-items:center;font-weight:800;background:#f4f5f8;transition:transform 80ms ease,background-color .12s ease}.keyboard-key.hand-left{background:#ddefff}.keyboard-key.hand-right{background:#ffe7d8}.keyboard-key.home-row{box-shadow:inset 0 -4px #8bb7d3}.keyboard-key.expected{background:#ffe38f;transform:translateY(-2px) scale(1.06);box-shadow:0 0 0 2px #f57f17}.keyboard-key.wrong{background:#ff8f93}.keyboard-legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.legend-item{border:2px solid var(--outline);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:700}.legend-item.left-zone{background:#dceefe}.legend-item.right-zone{background:#ffe8d6}.legend-item.home-zone{background:#ebf7cb}.results-body{display:grid;gap:6px}.result-row{display:flex;justify-content:space-between;border:2px solid var(--outline);border-radius:10px;padding:8px 10px;background:#fff}.hint{margin-bottom:10px}@media(max-width:1200px){.app-shell{grid-template-rows:65vh 35vh}.hud-row{grid-template-columns:repeat(4,minmax(90px,1fr))}.keyboard-info{grid-template-columns:repeat(2,minmax(120px,1fr))}}