@import url('/website.css');
.tutorial-main{max-width:1220px;margin:0 auto;padding:36px 28px 85px}
.tutorial-hero{text-align:center;padding:35px 18px 45px}
.tutorial-hero h1{font:900 clamp(50px,7vw,92px)/.97 'Barlow Condensed',Impact,sans-serif;margin:10px auto 18px;letter-spacing:1px}
.tutorial-hero h1 em{font-style:normal;color:#dafa66}
.tutorial-hero p{color:#b9d0be;max-width:670px;margin:0 auto 23px;font-size:16px}
.tutorial-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px auto 0}
.tutorial-nav a{border:1px solid #537958;background:#1b3c2b;border-radius:7px;padding:9px 12px;color:#deebdc;font-size:12px;font-weight:800}
.tutorial-nav a:hover{border-color:#daf66e;color:#daf66e}
.tutorial-panel{background:#142d24;border:1px solid #547a55;border-radius:16px;padding:28px;margin-bottom:22px;scroll-margin-top:18px}
.tutorial-panel h2{font:900 clamp(29px,4vw,42px) 'Barlow Condensed',Impact,sans-serif;margin:0 0 17px}
.tutorial-panel h2 span{color:#ddfa67;margin-right:7px}
.tutorial-panel p{color:#bcd2c0;line-height:1.7;margin:8px 0 15px}
.tutorial-grid{display:grid;grid-template-columns:minmax(220px,.85fr) 1.15fr;gap:28px;align-items:center}
.tutorial-illustration{display:block;width:100%;height:auto;object-fit:cover;background:#28523d;border:1px solid #4e8151;border-radius:12px}
.tutorial-illustration.gameplay{aspect-ratio:1.28/1}
.tutorial-steps{padding-left:19px;color:#e1eee0;line-height:1.8}
.tutorial-steps li{padding:3px 0}
.tutorial-steps li::marker{color:#dafa66}
.tutorial-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tutorial-control-grid div{background:#234636;border:1px solid #527456;border-radius:10px;padding:15px;text-align:center}
.tutorial-control-grid strong{display:block;font-size:17px;color:#e7f7c0}
.tutorial-control-grid span{display:block;color:#b4cbb7;font-size:12px;margin-top:4px}
.tutorial-note{background:#243f2e;border-left:4px solid #daf66e;border-radius:8px;padding:14px 17px;color:#e3f3d9;margin-top:15px;line-height:1.6}
.tutorial-patterns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tutorial-pattern-card{background:#203d2c;border:1px solid #456b4b;border-radius:11px;padding:14px;display:flex;gap:14px;align-items:center}
.tutorial-pattern-card img{width:102px;height:105px;object-fit:cover;border-radius:6px;flex:none}
.tutorial-pattern-card strong{display:block;color:#e7f5df;font-size:15px}
.tutorial-pattern-card span{display:block;color:#b9cdbb;font-size:12px;line-height:1.6;margin-top:4px}
.tutorial-bonus{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:20px;margin-top:18px}
.tutorial-bonus>img{width:190px;max-height:200px;object-fit:contain}
.tutorial-tiers{display:grid;gap:6px}
.tutorial-tiers>div{display:flex;justify-content:space-between;gap:12px;background:#213c2e;padding:11px 15px;border-radius:8px;font-size:14px}
.tutorial-tiers strong{color:#daf66e}
.tutorial-credits{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:16px}
.tutorial-credits>div{background:#234534;border:1px solid #4d6c50;padding:13px 14px;border-radius:9px;display:flex;justify-content:space-between;gap:12px}
.tutorial-credits strong{color:#dafa66;white-space:nowrap}
.tutorial-upgrades{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tutorial-upgrades article{padding:14px;border-radius:10px;background:#244233;border:1px solid #517755}
.tutorial-upgrades h3{font:900 23px 'Barlow Condensed',Impact,sans-serif;color:#e9f8e8;margin:0}
.tutorial-upgrades p{font-size:13px;margin:4px 0 0}
.tutorial-bottom{text-align:center;padding:35px 0}
.tutorial-bottom p{color:#b7d1b6;font-size:13px;margin-top:18px}
@media(max-width:780px){.tutorial-main{padding:16px 13px 45px}.tutorial-panel{padding:17px}.tutorial-grid{grid-template-columns:1fr}.tutorial-illustration.gameplay{max-width:540px;aspect-ratio:auto;margin:auto}.tutorial-control-grid{grid-template-columns:repeat(2,1fr)}.tutorial-patterns{grid-template-columns:1fr}.tutorial-bonus{grid-template-columns:115px 1fr;gap:9px}.tutorial-bonus>img{width:115px}.tutorial-credits{grid-template-columns:1fr}.tutorial-upgrades{grid-template-columns:1fr 1fr}.tutorial-hero{padding:25px 5px}}
@media(max-width:380px){.tutorial-control-grid{grid-template-columns:1fr 1fr}.tutorial-control-grid strong{font-size:14px}.tutorial-upgrades{grid-template-columns:1fr}.tutorial-pattern-card img{width:78px;height:100px}}