@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');
:root{--ink:#173b32;--paper:#f7f3e7;--lime:#d5ec83}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ef8055;outline-offset:4px}header{max-width:1320px;margin:auto;padding:30px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #173b3220}.brand{font-size:32px;font-weight:700;letter-spacing:-2px;text-decoration:none;color:inherit}.brand span{color:#ec8056;margin-left:5px}.edition,.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px}header button{background:none;border:1px solid #173b3240;border-radius:30px;padding:10px 17px}.intro{text-align:center;padding:58px 20px 40px}.intro h1{font-family:Fraunces,Georgia,serif;font-size:clamp(48px,6vw,78px);letter-spacing:-3px;line-height:1.04;margin:20px 0}.intro em{font-style:normal;color:#749242}.intro p{color:#677467;font-size:16px}main{max-width:1230px;margin:auto;padding:0 40px}.arcade{display:grid;grid-template-columns:290px minmax(0,600px);justify-content:center;gap:44px;align-items:start}.arcade aside{padding-top:28px;text-align:center}.arcade aside canvas{width:230px;height:230px;margin-top:20px;border-radius:48% 48% 25% 25%;border:8px solid #fff;box-shadow:0 12px 0 #e7e3d5}.arcade aside h2{font-family:Fraunces,serif;font-size:32px;margin:24px 0 5px}.arcade aside>p{color:#778173;margin:0 0 23px}.primary{background:var(--lime);border:0;border-radius:12px;padding:16px 22px;font-weight:700;box-shadow:0 3px 0 #173b3220}.primary span{margin-left:30px}.primary:hover{background:#e2f6a4;transform:translateY(-1px)}.instructions{text-align:left;margin-top:40px;border-top:1px solid #173b3220;padding-top:22px;font-size:13px;line-height:1.65;color:#778173}.instructions b{color:var(--ink)}.machine{background:#173b32;border:8px solid #173b32;border-radius:28px;box-shadow:0 16px 0 #dcded0,0 24px 50px #173b3215;overflow:hidden;color:#fff}.game-top{padding:20px 21px;display:flex;justify-content:space-between;align-items:center}.label{font-size:10px;letter-spacing:2px;color:#c8dbb6}.game-top h2{font-family:Fraunces,serif;font-size:23px;margin:5px 0 0}.game-top button{border:1px solid #ffffff40;border-radius:50%;background:none;color:white;width:33px;height:33px}.stats{background:#244b3d;display:flex;align-items:center;padding:12px 22px;gap:35px}.stats div{display:flex;flex-direction:column;gap:2px}.stats span{font-size:9px;letter-spacing:1.5px;color:#abc0ad}.stats b{font-size:21px}.stats button{margin-left:auto;background:none;border:0;color:#d8e5d9;font-size:12px}.board{position:relative;background:#e4ecd1;border-radius:14px;overflow:hidden}.board>canvas{display:block;width:100%;touch-action:none}.overlay{position:absolute;inset:0;background:#e4ecd1e8;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--ink);padding:20px;backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.overlay h2{font-family:Fraunces,serif;font-size:38px;margin:15px 0 8px}.overlay p{font-size:14px;margin-bottom:26px}.game-bottom{display:flex;justify-content:space-between;padding:15px 14px 8px;font-size:11px;color:#cadab9}.game-bottom button{background:none;border:0;color:inherit;font-size:11px}#collection{padding:100px 0 60px}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section-title h2{font-family:Fraunces,serif;font-size:40px;letter-spacing:-1px;line-height:1.12;margin:15px 0 0}.section-title p{font-size:14px;color:#778173;line-height:1.6}#heroes{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.hero{background:#fffdf5;border:1px solid #dcded0;border-radius:18px;padding:12px 8px 16px;text-align:center;transition:transform .2s,border-color .2s}.hero:hover{transform:translateY(-5px)}.hero.selected{border:2px solid #749242;background:#edf2db;padding:11px 7px 15px}.hero canvas{width:100%;aspect-ratio:1;border-radius:12px}.hero b{display:block;font-size:13px;margin-top:12px}.hero span{display:block;color:#8a927d;font-size:10px;margin-top:4px}footer{padding:40px max(30px,calc((100vw - 1150px)/2));border-top:1px solid #173b3220;display:flex;align-items:center;justify-content:space-between;gap:25px}footer p,footer>span{font-size:12px;color:#778173}dialog{border:0;border-radius:22px;background:var(--paper);color:var(--ink);max-width:440px;padding:38px;line-height:1.6}dialog::backdrop{background:#173b3288}dialog h2{font-family:Fraunces,serif;font-size:32px}#closeHelp{position:absolute;right:15px;top:12px;background:none;border:0;font-size:25px}@media(max-width:900px){main{padding:0 24px}.arcade{grid-template-columns:210px minmax(0,500px);gap:24px}.arcade aside canvas{width:185px;height:185px}#heroes{grid-template-columns:repeat(4,1fr)}.edition{display:none}.stats{gap:22px}}@media(max-width:620px){header{padding:18px 22px}.brand{font-size:28px}.intro{padding:35px 10px 22px}.intro h1{letter-spacing:-2px}.intro p{max-width:290px;margin:0 auto;line-height:1.5}main{padding:0 15px}.arcade{display:flex;flex-direction:column;gap:18px}.arcade aside{width:100%;padding:0;display:grid;grid-template-columns:65px 1fr auto;align-items:center;text-align:left;gap:6px 12px}.arcade aside>.eyebrow,.instructions{display:none}.arcade aside canvas{width:65px;height:65px;border:3px solid white;border-radius:16px;grid-row:1/3;margin:0;box-shadow:none}.arcade aside h2{font-size:22px;margin:0;align-self:end}.arcade aside>p{font-size:11px;margin:0;align-self:start}.arcade aside .primary{grid-column:3;grid-row:1/3;font-size:11px;padding:12px}.arcade aside .primary span{display:none}.machine{width:100%;border-width:6px;border-radius:22px}.game-top{padding:12px 15px}.game-top h2{font-size:20px}.stats{padding:9px 15px;gap:30px}.stats b{font-size:18px}#collection{padding:65px 0 35px}.section-title{align-items:start;gap:15px}.section-title h2{font-size:29px}.section-title p{font-size:11px;max-width:105px}#heroes{grid-template-columns:repeat(3,1fr);gap:9px}.hero{padding:8px 5px 12px}.hero.selected{padding:7px 4px 11px}.hero b{font-size:11px}footer{flex-wrap:wrap;padding:25px;gap:5px 20px}footer>span{width:100%}dialog{max-width:calc(100% - 30px);padding:28px}.overlay h2{font-size:30px}}
.hero-viewer{position:relative;width:230px;height:230px;margin:20px auto 0;overflow:hidden;border:8px solid #fff;border-radius:48% 48% 25% 25%;background:radial-gradient(circle at 50% 28%,#fff8d9 0,#f3d990 58%,#dceba4 100%);box-shadow:0 12px 0 #e7e3d5}.arcade aside .hero-viewer canvas{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none}.arcade aside #hero3d{cursor:grab;touch-action:none}.arcade aside #hero3d:active{cursor:grabbing}.hero3d-status{min-height:30px;max-width:250px;margin:14px auto -8px;color:#778173;font-size:10px;line-height:1.4}.hero-viewer canvas[hidden]{display:none}
@media(max-width:700px){.hero-viewer{width:112px;height:112px;margin:0}.hero3d-status{grid-column:1;grid-row:2;max-width:112px;margin:2px 0 0;font-size:8px;line-height:1.2}.arcade aside h2{grid-column:2;grid-row:1}.arcade aside>p{grid-column:2;grid-row:2}}
@media(max-width:620px){.hero-viewer{width:65px;height:65px;margin:0;border-width:3px;border-radius:16px;grid-row:1/3}.hero3d-status{display:none}}