/* Painted field-guide cards, with carved wood and imperfect parchment edges. */
#tutorialScreen{background:radial-gradient(ellipse at 50% 0,#416778,transparent 65%),linear-gradient(115deg,#102e43,#203f52 60%,#122c40);font-family:'Trebuchet MS',system-ui,sans-serif;color:#382a25}
#tutorialScreen .tutorialTop{background:linear-gradient(#88603b,#604129);border-bottom:6px solid #392a21;box-shadow:inset 0 3px #cda36a,0 5px 0 #bb935b,0 10px 18px #061b2866;padding-top:max(16px,env(safe-area-inset-top));isolation:isolate}
#tutorialScreen .tutorialTop:after{content:'';position:absolute;inset:7px;z-index:-1;border:2px solid #d4ac7355;border-radius:37% 6px 15% 7px;pointer-events:none}
#tutorialScreen .tutorialTop small{color:#f6dca5;font-size:11px;font-weight:900;letter-spacing:2px}
#tutorialScreen .tutorialTop h2{font-family:'Arial Black','Trebuchet MS',sans-serif;font-size:clamp(25px,3.1vw,38px);font-weight:1000;letter-spacing:-.8px;color:#ffe49a;-webkit-text-stroke:1px #54321d;paint-order:stroke fill;text-shadow:1px 3px #39291e,0 5px #39291e;transform:rotate(-1deg)}
#tutorialScreen .tutorialTop button{flex:none;width:52px;height:52px;display:grid;place-items:center;border:3px solid #553820;border-bottom-width:6px;background:linear-gradient(#ffe9a3,#e6b75c);border-radius:17px 12px 19px 14px;color:#654023;box-shadow:inset 0 2px #fff5c5,0 3px #2a2421}
#tutorialScreen .tutorialTop button:active{transform:translateY(2px)}
#tutorialScreen button:focus-visible{outline:3px solid #fff0ac;outline-offset:4px}
#tutorialScreen .tutorialShell{max-width:1200px;padding:28px 24px}
#tutorialScreen .tutorialLead{font-size:30px;line-height:1.35;color:#ffe7a5;text-shadow:0 3px #102c40;font-weight:1000;margin:8px 0 20px}
#tutorialScreen .tutorialLead span{display:inline-block;font-size:17px;color:#e4edf0;font-weight:700;text-shadow:0 2px #183648;margin-top:8px}
#tutorialScreen .tutorialLegend{gap:12px;font-size:14px;font-weight:800;color:#ffe8b6;padding:13px 16px;border:2px solid #b9945a;border-bottom-width:4px;border-radius:17px 11px 20px 13px;background:#18394e;max-width:700px;margin:0 auto}
#tutorialScreen .tutorialLegend i{width:23px;height:7px;transform:rotate(-4deg);box-shadow:0 2px #071e3066}
#tutorialScreen .tutorialNote{font-size:15px;line-height:1.65;color:#d2e1e6;max-width:730px;margin:18px auto 30px}
#tutorialScreen .tutorialLessons{gap:30px 26px;align-items:start}
#tutorialScreen .tutorialCard{position:relative;padding:22px 20px 18px;border:4px solid #65462d;border-bottom:8px solid #483222;border-radius:24px 14px 28px 17px;background:radial-gradient(ellipse at 20% 5%,#fff3cd,transparent 70%),linear-gradient(115deg,#edcd92,#f5dfa9 60%,#dfb979);box-shadow:inset 0 0 0 3px #ffedbb,0 5px 0 #142d3e,0 10px 18px #061c3055;color:#402e25}
#tutorialScreen .tutorialCard:before,#tutorialScreen .tutorialCard:after{content:'';position:absolute;top:12px;width:8px;height:8px;border-radius:40% 55% 45% 50%;background:#866342;border:2px solid #543c29;box-shadow:inset 1px 1px #caa674;pointer-events:none}
#tutorialScreen .tutorialCard:before{left:10px}#tutorialScreen .tutorialCard:after{right:10px}
#tutorialScreen .tutorialCard>small{display:block;text-align:center;font-size:12px;font-weight:900;letter-spacing:1.4px;color:#785334}
#tutorialScreen .tutorialCard h3{width:fit-content;min-width:58%;box-sizing:border-box;text-align:center;margin:10px auto 20px;padding:7px 18px 10px;background:linear-gradient(#8e6542,#69472e);border:3px solid #493223;border-bottom:5px solid #493223;border-radius:9px 17px 10px 14px;color:#ffedb2;font-family:'Arial Black','Trebuchet MS',sans-serif;font-weight:1000;font-size:31px;text-shadow:0 3px #38261e;transform:rotate(-2deg);box-shadow:inset 0 2px #c69a62,0 3px #ad874e55}
#tutorialScreen .tutorialCard:nth-child(even) h3{transform:rotate(1.5deg)}
#tutorialScreen .tutorialBoard{border:5px solid #6d4a2e;border-bottom-width:7px;border-radius:13px 8px 15px 10px;box-shadow:0 0 0 2px #c79d61,inset 0 0 10px #34271c55;background:#8caa73}
#tutorialScreen .tutorialCard dl{font-size:16px;line-height:1.55;margin:20px 0 0}
#tutorialScreen .tutorialCard dt{display:table;font-size:12px;font-weight:1000;letter-spacing:1.2px;color:#ffedbd;background:#476458;border:2px solid #30463d;border-radius:7px 11px 6px 9px;padding:3px 10px;transform:rotate(-1deg);margin-top:17px;box-shadow:inset 0 1px #b8c49166,0 2px #b38c53}
#tutorialScreen .tutorialCard dt:nth-of-type(2){background:#8b4c3c;border-color:#623326}
#tutorialScreen .tutorialCard dd{margin:9px 0 0;color:#402e25;font-weight:600}
#tutorialScreen .tutorialTip{position:relative;font-size:14px;line-height:1.6;color:#66482d;border:0;border-top:3px dashed #b28d58;padding-top:14px;margin-top:18px;font-weight:600}
@media(max-width:600px){#tutorialScreen .tutorialShell{padding:24px 16px}#tutorialScreen .tutorialTop{gap:9px;padding-left:12px;padding-right:12px}#tutorialScreen .tutorialTop h2{font-size:24px}#tutorialScreen .tutorialTop small{font-size:9px;letter-spacing:1.1px}#tutorialScreen .tutorialTop>svg{width:28px;flex:none}#tutorialScreen .tutorialTop button{width:46px;height:48px}#tutorialScreen .tutorialLead{font-size:27px}#tutorialScreen .tutorialLead span{font-size:16px}#tutorialScreen .tutorialCard{max-width:430px;padding:22px 18px 18px}#tutorialScreen .tutorialLegend{font-size:13px;gap:8px}#tutorialScreen .tutorialNote{font-size:14px}#tutorialScreen .tutorialCard h3{font-size:30px}}
@media(prefers-reduced-motion:reduce){#tutorialScreen *{scroll-behavior:auto}}
/* Opened from a match with the "?" button: the field guide as a framed popup over the paused board. */
#tutorialScreen.popup{inset:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));max-width:1100px;margin:0 auto;border:5px solid #553820;border-bottom-width:9px;border-radius:26px 16px 30px 18px;box-shadow:inset 0 0 0 3px #b9945a,0 0 0 100vmax #061b28b3,0 14px 30px #000a}
#tutorialScreen.popup .tutorialTop{padding-top:16px}