.howto-button{position:fixed;top:12px;right:16px;z-index:50;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 2px 8px #00000014;font-size:.9rem}.howto-button>span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-text);font-weight:700;font-size:.85rem}.howto{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 20px 60px #0000004d}.howto::backdrop{background:#140f0a80}.howto-body{padding:20px 24px 24px;line-height:1.55}.howto header{display:flex;justify-content:space-between;align-items:center;gap:12px}.howto h2{margin:0}.howto h3{margin:1.4em 0 .4em;font-size:1.05rem;color:var(--accent)}.howto ul,.howto ol{padding-left:1.3em;margin:.4em 0}.howto li{margin:.35em 0}.howto-lead{font-size:1.05rem}.howto-close{background:none;border:0;font-size:1.8rem;line-height:1;padding:0 4px;color:var(--muted)}.howto-cats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.howto-cats li{margin:0;padding:4px 10px;border:1px solid var(--border);border-radius:999px;font-size:.9rem}.howto-tip{color:var(--muted);font-style:italic}.howto-footer{display:flex;justify-content:flex-end;margin-top:16px}@media(max-width:520px){.howto-button{top:8px;right:8px;font-size:.8rem}.howto-body{padding:16px}}.howto .code-block{background:color-mix(in srgb,var(--text) 6%,var(--surface));border:1px solid var(--border);border-radius:8px;padding:10px 12px;font:.78rem/1.45 ui-monospace,monospace;overflow-x:auto;white-space:pre}.howto code{font:.85em ui-monospace,monospace;background:color-mix(in srgb,var(--text) 6%,transparent);padding:0 4px;border-radius:4px}.howto a{color:var(--accent)}.tutorial-button{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;font-size:.85rem}.tutorial-button>span{padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--accent-text);font-weight:700;font-size:.72rem;letter-spacing:.08em}.howto.tutorial{width:min(940px,calc(100vw - 32px))}.tutorial-steps{list-style:none;padding:0!important;margin:16px 0 0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tutorial-steps li{margin:0!important;display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--text) 3%,var(--surface))}.tutorial-steps img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--bg, var(--surface))}.tutorial-steps h3{margin:0 0 4px;display:flex;align-items:center;gap:8px;color:var(--text)}.tutorial-steps p{margin:0;font-size:.92rem;color:var(--muted)}.tutorial-num{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-text);font-family:Cinzel,serif;font-size:1rem;font-weight:700}.tutorial-win{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 0;padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--gold, #c9a227) 60%,var(--border));background:color-mix(in srgb,var(--gold, #c9a227) 14%,var(--surface));font-size:1.05rem;text-align:center}.tutorial-win>span:first-child{font-size:1.6rem}.tutorial .howto-footer{justify-content:space-between;align-items:center}.tutorial .howto-footer .link{font-size:.9rem}@media(max-width:720px){.tutorial-steps{grid-template-columns:1fr;gap:10px}.tutorial-steps li{gap:8px}.tutorial-steps img{aspect-ratio:16 / 10}.tutorial-steps h3{font-size:.98rem}.tutorial-steps p{font-size:.85rem}.tutorial-button{top:12px;right:12px}}.achievements-button{display:inline-flex;align-items:center;gap:6px}.achievement-list{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}.achievement-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-sky)}.achievement-list li.earned{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.achievement-list li.locked{opacity:.75}.achievement-icon{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border);font-size:1.55rem}.earned .achievement-icon{border-color:var(--gold)}.locked .achievement-icon{filter:grayscale(1)}.achievement-text{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.92rem;line-height:1.35}.achievement-text strong{font-family:var(--font-display);font-size:1rem}.achievement-date{color:var(--muted);font-size:.8rem}.achievement-note{margin:14px 0 0;font-size:.85rem}.achievement-toast{position:fixed;left:50%;bottom:20px;z-index:60;display:flex;gap:12px;align-items:center;width:min(380px,calc(100vw - 32px));padding:12px 14px;border:1px solid var(--gold);border-radius:12px;background:var(--surface);color:var(--text);text-align:left;box-shadow:0 10px 30px #00000040;transform:translate(-50%);animation:toast-in .35s ease-out both,toast-out .4s ease-in 4.1s forwards}.achievement-toast .achievement-icon{border-color:var(--gold)}.achievement-kicker{color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,24px)}}@keyframes toast-out{to{opacity:0;transform:translate(-50%,24px)}}@media(prefers-reduced-motion:reduce){.achievement-toast{animation:none}}.howto .achievement-list{padding:0}.howto .achievement-list li{margin:0}.achievements-button.corner{position:fixed;top:12px;left:16px;z-index:50;padding:6px 12px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 2px 8px #00000014;font-size:.9rem}
