:root{ --ink:#2a2233; --paper:#fffaf0; --green:#2f8f4e; --gold:#f6d04d; --red:#e0574f; --blue:#3d7fd9; --sky:#bfe8ff; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:Verdana, "Trebuchet MS", Tahoma, sans-serif; color:var(--ink); background:#9fdcff; line-height:1.55;
  background-image:linear-gradient(90deg, rgba(255,255,255,.15) 50%, transparent 50%), linear-gradient(rgba(255,255,255,.15) 50%, transparent 50%); background-size:32px 32px; }
a{ color:#1f5fb0; }
.hero{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 16px 30px; background:linear-gradient(#7fd0ff, #bfe8ff); border-bottom:6px solid var(--ink); }
#hero-scene{ width:min(960px, 100%); aspect-ratio:240/110; image-rendering:pixelated; border:5px solid var(--ink); border-top:none; box-shadow:0 6px 0 rgba(0,0,0,.2); }
.hero-text{ max-width:760px; margin-top:-34px; background:var(--paper); border:5px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:18px 26px 22px; position:relative; }
.kicker{ margin:0; font-weight:bold; color:var(--green); text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; }
.logo{ margin:.1em 0 .15em; font-size:clamp(2.6rem, 9vw, 5rem); line-height:1; letter-spacing:.04em; color:var(--gold); text-shadow:4px 4px 0 #b8572b, 7px 7px 0 var(--ink); }
.logo span:last-child{ color:#fff; text-shadow:4px 4px 0 var(--green), 7px 7px 0 var(--ink); }
.tag{ font-size:1.12rem; margin:.4em 0 1em; }
.play-btn{ display:inline-block; background:var(--red); color:#fff; text-decoration:none; font-weight:bold; font-size:clamp(1.4rem, 4vw, 2rem); padding:.45em 1.4em; border:5px solid var(--ink); box-shadow:inset -6px -6px 0 #a83a33, inset 6px 6px 0 #ff8a80, 6px 6px 0 var(--ink); letter-spacing:.06em; transition:transform .08s; animation:pulse 1.6s ease-in-out infinite; }
.play-btn:hover{ transform:translate(-2px,-2px); box-shadow:inset -6px -6px 0 #a83a33, inset 6px 6px 0 #ff8a80, 8px 8px 0 var(--ink); }
.play-btn:active{ transform:translate(3px,3px); box-shadow:inset -6px -6px 0 #a83a33, 2px 2px 0 var(--ink); }
.play-btn:focus-visible{ outline:4px dashed var(--blue); outline-offset:4px; }
@keyframes pulse{ 50%{ filter:brightness(1.1); } }
@media (prefers-reduced-motion: reduce){ .play-btn{ animation:none; } html{ scroll-behavior:auto; } }
.small{ font-size:.85rem; color:#4a4458; }
.jump{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:14px; position:sticky; top:0; z-index:5; background:var(--ink); }
.jump a{ color:#fff; text-decoration:none; font-weight:bold; padding:6px 12px; border:3px solid #4b3d5e; background:#3a3046; }
.jump a:hover{ background:var(--green); }
main{ max-width:1080px; margin:0 auto; padding:24px 16px 10px; }
.card{ background:var(--paper); border:5px solid var(--ink); box-shadow:8px 8px 0 rgba(42,34,51,.85); padding:22px 26px; margin:0 0 30px; scroll-margin-top:70px; }
.card h2{ margin:0 0 .5em; font-size:1.8rem; color:var(--green); text-shadow:2px 2px 0 #cdeccf; }
.card h3{ margin:.6em 0 .3em; }
.mt{ margin-top:1.2em !important; }
.two{ display:grid; grid-template-columns:1.2fr 1fr; gap:26px; }
@media (max-width:800px){ .two{ grid-template-columns:1fr; } }
.feature-list{ display:flex; flex-direction:column; gap:12px; }
.feat{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:3px solid var(--ink); padding:10px; }
.ico{ flex:none; width:40px; height:40px; display:grid; place-items:center; border:3px solid var(--ink); font-weight:bold; font-size:1.3rem; }
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
@media (max-width:800px){ .steps{ grid-template-columns:repeat(2, 1fr); } }
.step{ background:#fff; border:3px solid var(--ink); padding:12px; text-align:center; }
.step canvas{ width:72px; height:72px; image-rendering:pixelated; }
.step h3{ font-size:1.05rem; margin:.3em 0; } .step p{ margin:0; font-size:.92rem; }
.bang{ color:#e0a000; }
.controls{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:16px; }
@media (max-width:800px){ .controls{ grid-template-columns:1fr; } }
.controls > div{ background:#eef7ff; border:3px dashed #7fb3e0; padding:10px 14px; }
.controls p{ margin:0; }
kbd{ display:inline-block; min-width:1.6em; text-align:center; background:#fff; border:2px solid var(--ink); border-bottom-width:4px; padding:0 .3em; margin:1px; font-family:inherit; font-size:.85em; }
.skills{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.skill{ display:flex; gap:10px; background:#fff; border:3px solid var(--ink); padding:8px 10px; }
.sdot{ flex:none; width:20px; height:20px; border:3px solid var(--ink); margin-top:3px; }
.val{ font-size:.75rem; background:var(--green); color:#fff; padding:0 .4em; }
.table-wrap{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; background:#fff; border:3px solid var(--ink); }
th, td{ text-align:left; vertical-align:top; padding:8px 10px; border-bottom:2px solid #e6dcc6; font-size:.92rem; }
th{ background:var(--ink); color:#fff; }
td:first-child{ width:48%; }
.muddles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.muddle{ background:#fff; border:3px solid var(--ink); padding:12px; text-align:center; }
.muddle canvas{ width:96px; height:96px; image-rendering:pixelated; }
.muddle.boss{ background:#fff3f0; border-color:#8a3a4a; } .muddle.boss canvas{ width:128px; height:128px; }
.muddle h3{ margin:.2em 0; } .muddle p{ margin:.25em 0; }
.type{ display:inline-block; color:#fff; font-weight:bold; font-size:.75rem; padding:1px 6px; border:2px solid var(--ink); }
.tips{ padding-left:1.2em; } .tips li{ margin:.35em 0; }
.qs details{ background:#fff; border:3px solid var(--ink); margin:0 0 8px; padding:6px 10px; }
.qs summary{ cursor:pointer; font-weight:bold; }
.qs ul{ margin:.4em 0 .2em; padding-left:1.2em; } .qs li{ margin:.3em 0; }
footer{ text-align:center; padding:20px 16px 40px; background:var(--ink); color:#ddd; border-top:6px solid #120e1f; }
footer p{ max-width:700px; margin:14px auto 0; font-size:.85rem; }
.small-btn{ font-size:1.3rem; }