/* Shared tutorials: separate modal page, no game-state or scoring changes. */
.card-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:auto;align-items:stretch}.fast-click-card .card-actions .play-fast-click{margin:0}.card-tutorial{border:1px solid #596150;background:#262c25;color:#eef2df;border-radius:9px;padding:9px 12px;font:700 13px/1.2 system-ui,sans-serif;cursor:pointer;min-height:44px}.card-tutorial:hover{background:#354032;border-color:#b5ce93}
.pr-tutorial-entry{grid-column:1/-1;display:flex;justify-content:flex-end;flex:0 0 auto;width:100%;margin:0 0 14px;position:relative;z-index:1}.pr-tutorial-button{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:42px!important;width:auto!important;max-width:100%;padding:8px 14px!important;background:#f8f0db!important;color:#263044!important;border:2px solid #263044!important;border-radius:10px!important;box-shadow:0 3px 0 #26304433!important;font:800 14px/1.2 system-ui,sans-serif!important;cursor:pointer;white-space:nowrap;pointer-events:auto}.pr-tutorial-button svg{height:20px!important;width:20px!important;flex:none}.pr-tutorial-button:hover{background:#cce8b8!important}.pr-tutorial-button:focus-visible,.card-tutorial:focus-visible{outline:3px solid #e4a04b;outline-offset:4px}.pr-tutorial-header{margin-left:auto;flex-shrink:0}#fc-overlay{overflow-y:auto}
#tutorial-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f5f0e3;color:#263044;overflow-y:auto;overscroll-behavior:contain;color-scheme:light;text-align:left;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;scroll-behavior:smooth}
#tutorial-dialog::backdrop{background:#111b22e8;backdrop-filter:blur(8px)}#tutorial-dialog *{box-sizing:border-box}#tutorial-dialog [hidden]{display:none!important}#tutorial-dialog button{font-family:inherit;cursor:pointer}#tutorial-dialog button:focus-visible{outline:3px solid #bde88c;outline-offset:4px}#tutorial-dialog :is(h1,h2,h3,p,figure,dl,ol){margin:0}#tutorial-dialog :is(h1,h2,h3){color:inherit;line-height:1.12;text-wrap:balance}#tutorial-dialog p{line-height:1.65}#tutorial-dialog svg{display:block;width:100%;height:auto}
.pr-tutorial-top{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:4;padding:14px clamp(18px,4vw,64px);background:#202b2d;color:#f7f1e1;border-bottom:1px solid #ffffff20}.pr-tutorial-top small{font-weight:800;letter-spacing:.18em;font-size:11px}.pr-tutorial-back{border:0;background:transparent;color:inherit;min-height:42px;padding:8px 0;font-weight:700;font-size:14px;text-align:left}#tutorial-close{width:44px;min-width:44px;height:44px;padding:0;background:#ffb298;color:#263044;border:2px solid #263044;border-radius:11px;font-weight:800;font-size:28px;line-height:1}
.pr-tutorial-hero{background:#263638;color:#fff6e1;border-bottom:5px solid #263044;position:relative;overflow:hidden}.pr-tutorial-hero-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr);align-items:center;gap:32px;padding:40px clamp(20px,4vw,64px)}.pr-tutorial-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#c3dfae;font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.pr-tutorial-kicker span+span{color:#e2ddd2;background:#ffffff0c;border:1px solid #ffffff24;border-radius:50px;padding:5px 10px;letter-spacing:.04em}#tutorial-name{font-size:clamp(38px,5.4vw,72px);letter-spacing:-.05em;font-weight:900;margin:15px 0 18px;overflow-wrap:anywhere}#tutorial-goal{max-width:640px;font-size:clamp(16px,1.7vw,20px);color:#eee8da}#tutorial-cover{max-width:290px;width:100%;height:245px;margin:auto;filter:drop-shadow(0 14px 8px #101e2638);transform:rotate(-3deg)}#tutorial-cover>svg{width:100%;height:100%;object-fit:contain}#tutorial-dialog.pr-tutorial-horror .pr-tutorial-hero{background:#252331}
.pr-tutorial-content{max-width:1320px;margin:0 auto;padding:28px clamp(20px,4vw,64px) 36px}.pr-tutorial-nav{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}.pr-tutorial-nav button{border:1px solid #b0b5a3;background:#fffcf5;color:#263044;min-height:42px;padding:9px 15px;border-radius:40px;font-size:13px;font-weight:750}.pr-tutorial-nav button:hover{background:#d5e5c2}.pr-tutorial-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,52px);align-items:start}.pr-tutorial-section{scroll-margin-top:90px;outline:none}.pr-tutorial-section h2{font-size:24px;letter-spacing:-.8px;margin-bottom:25px!important}.pr-tutorial-steps{list-style:none;padding:0}.pr-tutorial-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;margin-bottom:26px}.pr-tutorial-number{display:grid;place-items:center;width:44px;height:44px;background:#d5e5c2;border:2px solid #263044;border-radius:13px;font-size:15px;font-weight:900;box-shadow:0 3px #26304422}.pr-tutorial-steps li:nth-child(2) .pr-tutorial-number{background:#ffd68c}.pr-tutorial-steps li:nth-child(3) .pr-tutorial-number{background:#ffb7a1}.pr-tutorial-steps h3{font-size:18px;letter-spacing:-.3px;margin:1px 0 8px!important}.pr-tutorial-steps p{font-size:14px;color:#4a5857}.pr-tutorial-picture{border:2px solid #263044;border-radius:18px;overflow:hidden;background:#fffaed;box-shadow:6px 6px 0 #26304413}.pr-tutorial-picture-head{padding:14px 18px;border-bottom:1px solid #26304425;display:flex;justify-content:space-between;align-items:center;gap:10px}.pr-tutorial-picture-head b{font-size:13px}.pr-tutorial-picture-head span{color:#69736c;font-size:10px;font-weight:800;letter-spacing:.12em}.pr-tutorial-scene{aspect-ratio:640/360;width:100%;overflow:hidden;background:#fff5df}.pr-tutorial-scene svg{width:100%!important;height:100%!important}.pr-tutorial-picture figcaption{font-size:13px;line-height:1.55;padding:16px 18px;border-top:1px solid #26304420;color:#4a5857}.pr-tutorial-tip{margin-top:20px;background:#e7ecd9;border:1px solid #a2b294;border-radius:14px;padding:18px 20px}.pr-tutorial-tip b{display:block;color:#4b653c;font-size:11px;letter-spacing:.12em;margin-bottom:7px}.pr-tutorial-tip p{font-size:14px}
.pr-tutorial-details{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;border-top:1px solid #26304425;padding-top:30px;margin-top:28px}.pr-tutorial-details section{border:1px solid #c7ccba;background:#fffcf5;border-radius:16px;padding:24px}.pr-tutorial-details h2{margin-bottom:20px!important;font-size:22px}.pr-tutorial-controls>div{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1.3fr);gap:15px;padding:10px 0;align-items:center;border-bottom:1px solid #26304412}.pr-tutorial-controls>div:last-child{border-bottom:0}.pr-tutorial-controls dd{font-size:13px;line-height:1.5;margin:0;color:#4a5857}.pr-tutorial-controls dt{min-width:0}#tutorial-dialog kbd{display:inline-block;max-width:100%;font:750 12px/1.4 system-ui,sans-serif;white-space:normal;background:#f0f1e9;border:1px solid #aeb5aa;border-bottom:3px solid #aeb5aa;border-radius:6px;padding:5px 8px;color:#263044}#tutorial-outcome{font-size:15px;color:#4a5857}.pr-tutorial-foot{display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:1320px;margin:auto;padding:12px clamp(20px,4vw,64px) 36px}.pr-tutorial-foot p{font-size:13px;max-width:440px;color:#657168}.pr-tutorial-primary{min-height:50px;background:#c5e591;border:2px solid #263044;border-radius:12px;color:#263044;padding:12px 22px;box-shadow:0 4px #263044;font-size:15px;font-weight:850}
@media(max-width:760px){.pr-tutorial-top{padding:10px 16px;gap:10px}.pr-tutorial-top small{display:none}.pr-tutorial-hero-inner{padding:28px 20px;grid-template-columns:minmax(0,1fr) 140px;gap:14px}#tutorial-name{font-size:38px;letter-spacing:-1.7px}#tutorial-goal{font-size:15px}#tutorial-cover{height:155px}.pr-tutorial-kicker{font-size:10px;gap:6px}.pr-tutorial-content{padding:24px 18px}.pr-tutorial-grid,.pr-tutorial-details{grid-template-columns:1fr;gap:22px}.pr-tutorial-steps li{margin-bottom:22px}.pr-tutorial-details{margin-top:26px}.pr-tutorial-foot{padding:0 18px 30px;flex-direction:column;align-items:stretch}.pr-tutorial-primary{width:100%}.pr-tutorial-foot p{text-align:center;max-width:none}.pr-tutorial-header{padding:7px 9px!important;font-size:12px!important;gap:5px}.pr-tutorial-header svg{height:17px!important;width:17px!important}}
@media(max-width:480px){.pr-tutorial-hero-inner{grid-template-columns:minmax(0,1fr) 100px;gap:8px}#tutorial-name{font-size:33px}#tutorial-cover{height:120px}.pr-tutorial-hero-inner>div:first-child{grid-column:1/-1}.pr-tutorial-hero-inner>figure{display:none}#tutorial-cover{display:block;grid-column:1/-1;width:180px;height:140px;margin-top:5px}.pr-tutorial-details section{padding:20px 16px}.pr-tutorial-controls>div{grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr)}.pr-tutorial-top{padding-top:max(10px,env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){#tutorial-dialog{scroll-behavior:auto}#tutorial-dialog *,#tutorial-dialog *::before,#tutorial-dialog *::after{animation:none!important;transition:none!important}}

/* Initial menus stay in normal flow. Tutorial controls must not reserve an
   entire flex row/column and squeeze the actual intro or its start button. */
#qa-overlay,#mt-overlay{flex-direction:column;justify-content:flex-start;align-items:center}
.qa-intro,.mt-intro{flex:0 0 auto;min-width:0;margin-block:auto;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.qa-intro>div,.mt-intro>div{min-width:0}.qa-intro .pr-tutorial-entry,.mt-intro .pr-tutorial-entry{justify-content:flex-start}
#qa-message,#mt-message{overflow-wrap:break-word}#qa-start,#mt-start{min-height:48px;white-space:normal}
#fc-overlay{display:flex;flex-direction:column;justify-content:flex-start;padding:20px 12px;overscroll-behavior:contain}
#fc-intro{flex:0 0 auto;width:min(620px,100%);min-width:0;margin-block:auto}
#fc-intro>p:not(.fc-kicker){color:#a3ad9c;font-size:14px;line-height:1.7;margin:0 0 14px}
/* Safe centering leaves the top of tall menus reachable on short viewports. */
.cp-overlay,#dp-overlay,#hm-overlay,#lfh-overlay,#bz-overlay,#ls-overlay{align-items:safe center}
@media(max-width:650px){.qa-intro,.mt-intro{grid-template-columns:minmax(0,1fr);gap:20px}#qa-overlay,#mt-overlay{padding:20px}#fc-overlay{inset:78px 10px 10px}#fc-intro h3{font-size:clamp(32px,9vw,48px)}}
@media(max-height:600px){#qa-overlay,#mt-overlay{padding:16px}.qa-intro,.mt-intro{gap:20px}#qa-message,#mt-message{font-size:clamp(28px,4vw,42px)}#qa-art,#mt-art{max-height:190px}.cp-overlay{padding-top:84px}.cp-panel{padding:20px}}