html,body,#root{margin:0;height:100%;background:#0b0d1a;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}.hud{position:fixed;inset:0;pointer-events:none;font-family:Georgia,Times New Roman,serif;color:#fff4e0;text-align:center}.hud h1{margin:0;font-weight:400;font-size:clamp(36px,7vw,72px);letter-spacing:.25em;text-indent:.25em}.hud p{margin:12px 0 0;font-size:clamp(14px,1.8vw,18px);opacity:.8}.hud kbd{font-family:inherit;border:1px solid rgba(255,244,224,.5);border-radius:4px;padding:1px 6px}.title,.msg,.final,.controls,.start{position:absolute;left:0;right:0;opacity:0;transition:opacity 1.6s ease}.title{top:38%}.title h1{font-size:clamp(44px,9vw,96px)}.controls{top:12%}.start{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at center,#141e128c,#080c08d9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}.start.show{pointer-events:auto}.begin{font-family:Georgia,Times New Roman,serif;font-size:20px;letter-spacing:.2em;text-indent:.2em;color:#fff4e0;background:#ffe4aa14;border:1px solid rgba(255,228,170,.6);border-radius:999px;padding:12px 36px;cursor:pointer;transition:background .3s ease,box-shadow .3s ease}.begin:hover,.begin:focus-visible{background:#ffe4aa2e;box-shadow:0 0 24px #ffd28273;outline:none}.msg{top:18%;font-size:clamp(18px,2.6vw,28px);font-style:italic;letter-spacing:.05em}.fade{position:absolute;inset:0;background:#fff6ea;opacity:0;transition:opacity 2.5s ease}.final{top:50%;transform:translateY(-50%);color:#6b4a58}.final small{display:block;margin-top:28px;opacity:.6;font-size:14px}.show{opacity:1}.hud .hint{margin-top:6px;font-size:clamp(12px,1.4vw,15px);opacity:.6}canvas{cursor:grab}body.grabbing,body.grabbing canvas{cursor:grabbing}.elements{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);display:flex;gap:10px;opacity:0;transition:opacity 1.2s ease,transform 1.2s ease;pointer-events:none}.elements.show{opacity:1;transform:translate(-50%);pointer-events:auto}.element{position:relative;width:64px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid rgba(255,228,170,.45);border-radius:12px;background:#1e281673;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#ffe2a8;font-family:Georgia,Times New Roman,serif;cursor:pointer;transition:transform .25s ease,box-shadow .4s ease,opacity .6s ease,border-color .4s ease}.element svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.element .key{position:absolute;top:4px;left:6px;font-size:11px;opacity:.8}.element .name{font-size:11px;letter-spacing:.06em;opacity:.85}.element:focus-visible{outline:2px solid #ffe2a8;outline-offset:2px}.elements.choosing .element:not(.used){border-color:#ffe4aaf2;box-shadow:0 0 18px #ffd2828c;animation:glow 1.6s ease-in-out infinite}.element.used{opacity:.25;cursor:default}.element.wrong{animation:shake .45s ease;border-color:#ff8c78e6}@keyframes glow{50%{box-shadow:0 0 28px #ffd282d9}}@keyframes shake{20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@media(prefers-reduced-motion:reduce){.elements.choosing .element:not(.used),.element.wrong{animation:none}}