/* Illustrated help, shared by the desktop help button and in-game rules. */
#modal:has(.quick-guide){width:min(820px,calc(100vw - 28px));max-width:820px;padding:32px;border-radius:28px;max-height:calc(100dvh - 28px);overflow:auto}
.quick-guide{color:var(--text);font-family:Inter,sans-serif}
.guide-header{display:flex;align-items:center;gap:22px;margin:0 30px 24px 0}.guide-mascot{position:relative;display:grid;place-items:center;flex:none;width:92px;height:92px;background:color-mix(in srgb,var(--orange) 13%,var(--surface));border-radius:30px;transform:rotate(-5deg)}.guide-mascot>svg{width:72px;height:72px;animation:guide-hello 2.4s ease-in-out 2}.guide-mascot>span{position:absolute;right:-4px;top:0;color:var(--orange);font-size:26px}.guide-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--mint)}.quick-guide h2{font-family:Manrope,sans-serif;font-size:32px;letter-spacing:-1.2px;margin:8px 0}.guide-header p{font-size:12px;color:var(--sub);margin:0;line-height:1.7}
.guide-nav{display:flex;padding:5px;gap:5px;background:var(--club-bg);border:1px solid var(--club-line);border-radius:15px;margin-bottom:22px}.guide-nav button{flex:1;min-height:44px;padding:9px 8px;font-size:12px;border-radius:10px;color:var(--sub);font-weight:600}.guide-nav button[aria-pressed=true]{background:var(--surface);color:var(--mint);box-shadow:0 2px 8px #0002}.guide-panel{min-height:300px}.guide-rules,.guide-hints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.guide-rule{position:relative;padding:22px 14px 18px;background:var(--club-bg);border:1px solid var(--club-line);border-radius:20px;text-align:center}.guide-number{position:absolute;top:12px;left:14px;color:var(--sub);font-size:10px;letter-spacing:1px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:102px;height:102px;margin:10px auto 18px}.guide-grid>span{display:grid;place-items:center;border-radius:6px;background:#8faed0;color:#fff;font-size:27px;line-height:1;font-weight:700}.guide-grid-zone>span{background:#a995d5}.guide-grid-contact>span{background:#61bbb5}.guide-grid svg{width:31px;height:31px;overflow:visible}.guide-grid .guide-cross{color:#fff9}.quick-guide h3{font-size:13px;margin:0 0 8px;font-weight:700;line-height:1.4}.guide-rule p,.guide-hints p{font-size:12px;color:var(--sub);line-height:1.65;margin:0}.guide-tip{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--mint) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--mint) 20%,var(--club-line));border-radius:16px;padding:14px 18px;margin-top:14px}.guide-tip>span{flex:none}.guide-tip svg{width:38px;height:38px}.guide-tip p{font-size:12px;line-height:1.7;margin:0;color:var(--sub)}.guide-tip b{display:block;color:var(--text)}
.guide-gestures{display:grid;grid-template-columns:1fr 1fr;gap:12px}.guide-gestures article{display:flex;align-items:flex-start;gap:13px;padding:18px;background:var(--club-bg);border:1px solid var(--club-line);border-radius:18px}.guide-action-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--surface);color:var(--orange);font-size:30px}.guide-action-icon svg{width:38px;height:38px}.guide-ghost svg{opacity:.5;transform:scale(.75)}.guide-gestures p{margin:0;font-size:12px;line-height:1.7;color:var(--sub)}.guide-keyboard{font-size:11px;color:var(--sub);line-height:1.8;padding:8px 2px;margin:12px 0}.guide-hints article{padding:20px 16px;background:var(--club-bg);border:1px solid var(--club-line);border-radius:18px}.guide-hints article>span{display:block;color:var(--orange);font-size:30px;margin-bottom:14px}.guide-details{border-top:1px solid var(--club-line);padding:13px 0}.guide-details summary{font-size:12px;min-height:28px;cursor:pointer;color:var(--mint);line-height:28px}.guide-details p{font-size:12px;color:var(--sub);line-height:1.8}.guide-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:22px 0 0;padding-top:20px;border-top:1px solid var(--club-line)}.guide-footer>span{font-size:10px;color:var(--sub)}.guide-footer button{display:flex;align-items:center;justify-content:center;gap:20px;min-height:46px;background:var(--mint);color:var(--club-bg);font-size:13px;font-weight:700;padding:12px 22px;border-radius:14px;white-space:nowrap}.guide-footer button:hover{filter:brightness(1.08)}
@keyframes guide-hello{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg) translateY(-3px)}}
@media(max-width:580px){#modal:has(.quick-guide){padding:23px 18px;border-radius:23px}.guide-header{gap:13px;margin-right:20px}.guide-mascot{width:58px;height:64px;border-radius:20px}.guide-mascot>svg{width:53px;height:53px}.quick-guide h2{font-size:25px}.guide-kicker{font-size:8px}.guide-header p{font-size:11px}.guide-nav{gap:2px}.guide-nav button{font-size:10px;padding:8px 4px}.guide-rules{grid-template-columns:1fr;gap:9px}.guide-rule{display:grid;grid-template-columns:74px 1fr;column-gap:15px;text-align:left;padding:14px}.guide-number{display:none}.guide-grid{width:74px;height:74px;gap:3px;margin:0;grid-row:1/3}.guide-grid>span{font-size:22px;border-radius:5px}.guide-grid svg{width:23px;height:23px}.guide-rule h3{align-self:end;font-size:13px}.guide-rule p{font-size:11px}.guide-tip{padding:12px}.guide-tip p{font-size:11px}.guide-gestures{grid-template-columns:1fr}.guide-gestures article{padding:14px}.guide-hints{grid-template-columns:1fr;gap:9px}.guide-hints article{display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding:14px}.guide-hints article>span{grid-row:1/3;margin:0;align-self:center}.guide-hints h3{margin-bottom:4px}.guide-hints p{font-size:11px}.guide-footer{gap:10px}.guide-footer>span{max-width:130px;line-height:1.6}.guide-footer button{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.guide-mascot>svg{animation:none}}

/* The guide owns its closing actions; page-footer typography must not leak in. */
.guide-practice{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-top:18px;border-radius:20px;border:1px solid color-mix(in srgb,var(--mint) 22%,var(--club-line));background:linear-gradient(115deg,color-mix(in srgb,var(--mint) 6%,var(--surface)),var(--surface));box-shadow:0 5px 16px #00000005}.guide-practice-art{display:block;flex:none;width:67px;height:72px}.guide-practice-art>svg{display:block;width:100%;height:100%}.guide-practice-copy{flex:1;min-width:0}.guide-practice-kicker{display:block;color:var(--mint);font-size:8px;letter-spacing:1.2px;font-weight:700;margin-bottom:7px}.quick-guide .guide-practice-copy h3{font-family:Manrope,sans-serif;font-size:16px;letter-spacing:-.35px;margin:0 0 5px}.guide-practice-copy p{font-size:12px;line-height:1.65;margin:0;color:var(--sub)}.guide-practice-button{display:flex;align-items:center;justify-content:center;gap:15px;flex:none;min-height:44px;padding:11px 16px;background:var(--surface);color:var(--mint);border:1px solid color-mix(in srgb,var(--mint) 30%,var(--club-line));border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 3px 7px #00000006;transition:background .18s,border-color .18s,transform .18s}.guide-practice-button:hover{background:color-mix(in srgb,var(--mint) 8%,var(--surface));border-color:var(--mint);transform:translateY(-1px)}.guide-practice-button>span{font-size:18px;line-height:1}
footer.guide-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border:0;max-width:none;margin:16px 0 0;padding:0;letter-spacing:normal;text-transform:none;color:var(--sub);text-align:left}.guide-footer .guide-assurance{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;line-height:1.6;color:var(--sub);letter-spacing:normal}.guide-assurance>svg{width:18px;height:18px;flex:none;color:var(--mint);padding:3px;border-radius:50%;background:color-mix(in srgb,var(--mint) 10%,transparent)}.guide-footer #guide-done{min-height:46px;border:0;border-radius:13px;padding:12px 20px;font-size:13px;box-shadow:0 3px 0 color-mix(in srgb,var(--mint) 18%,transparent)}
@media(max-width:580px){.guide-practice{display:grid;grid-template-columns:50px minmax(0,1fr);gap:11px;padding:15px;border-radius:17px;margin-top:15px}.guide-practice-art{width:50px;height:58px}.guide-practice-kicker{font-size:7px;letter-spacing:.8px;margin-bottom:5px}.quick-guide .guide-practice-copy h3{font-size:15px}.guide-practice-copy p{font-size:11px}.guide-practice-button{grid-column:1/-1;width:100%;margin-top:1px;font-size:13px}footer.guide-footer{flex-direction:column;gap:13px;margin-top:15px}.guide-footer #guide-done{width:100%;font-size:14px}.guide-footer .guide-assurance{order:2;font-size:10px;justify-content:center;text-align:center;gap:6px}}