*{box-sizing:border-box}html{background:#f7f8fc;color:#202b48;font-family:system-ui,sans-serif}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:#4c5d99}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px max(20px,calc((100vw - 1180px)/2));background:#fff;border-bottom:1px solid #e0e4ef;font-size:13px}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;font-weight:650}.brand span{color:#5e6981}main{max-width:1180px;margin:auto;padding:26px 24px 40px}.heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:22px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:.19em;color:#5063a3}h1{font-size:40px;letter-spacing:-.05em;margin:8px 0}h1 span{display:block;font-size:19px;font-weight:500;letter-spacing:-.02em;color:#546492}.heading>p{font-size:14px;line-height:1.7;color:#687389}#stage{border:1px solid #dce2f0;border-radius:20px;overflow:hidden;background:#172139;box-shadow:0 16px 50px #26376318}#screen{position:relative;max-width:1024px;margin:auto;aspect-ratio:4/3;background:#0f1627}canvas{display:block;width:100%;height:100%;outline:none}canvas:focus-visible{outline:3px solid #ffca30;outline-offset:-3px}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:radial-gradient(ellipse at 70% 15%,#6976a9,#263454 65%);color:#fff}.overlay .eyebrow{color:#ffda78}.overlay h2{font-size:clamp(26px,5vw,58px);letter-spacing:-.055em;line-height:1.05;margin:12px 0 22px}.overlay p{font-size:14px;line-height:1.6;max-width:480px}.hint{color:#d8dced;font-size:12px!important}button{font:650 13px system-ui;cursor:pointer;border:1px solid #dce2ef;border-radius:9px;padding:11px 17px;background:#fff;color:#384a80;touch-action:manipulation}button:focus-visible{outline:3px solid #ffca30;outline-offset:2px}button:disabled{opacity:.55;cursor:wait}#start{background:#ffca30;color:#27304b;border:0;font-size:16px;padding:15px 38px;margin:22px}progress{width:min(340px,80%);height:8px;accent-color:#ffca30}#intro-wrap{padding:0;background:#000}video{width:100%;height:100%;object-fit:contain}#skip{position:absolute;bottom:20px;right:20px;background:#fff;color:#243153}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;color:#56637b;font-size:12px}.toolbar>div{display:flex;gap:6px;flex-wrap:wrap}.toolbar button{font-size:12px;padding:9px 12px}.below{display:grid;grid-template-columns:1fr auto;gap:14px 25px;padding-top:20px;font-size:12px;line-height:1.8;color:#616d83}.below>p{margin:0;grid-column:1/-1}details{max-width:740px}summary{cursor:pointer;color:#4c5d99;font-weight:650}.cta{font-weight:700;align-self:start}#touch{display:none;padding:14px;gap:24px;justify-content:center;align-items:center;background:#eef1f9}.dpad{display:grid;grid-template:repeat(2,44px)/repeat(3,44px);gap:4px}.up{grid-column:2}.left{grid-row:2;grid-column:1}.down{grid-row:2;grid-column:2}.right{grid-row:2;grid-column:3}#touch button{touch-action:none;user-select:none;-webkit-user-select:none;padding:8px}.actions{display:grid;gap:6px}.spells{display:flex;gap:4px}.spells button{min-width:32px}.attack{background:#4c5d99!important;color:white!important}.pressed{background:#ffca30!important;color:#172139!important}[hidden]{display:none!important}#stage:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center}#stage:fullscreen #screen{width:min(100%,calc((100dvh - 65px)*4/3));max-height:calc(100dvh - 65px);flex-shrink:1}#stage:fullscreen .toolbar{flex-shrink:0}@media(pointer:coarse),(max-width:740px){#touch{display:flex}header{padding:10px 14px}.brand span{display:none}main{padding:18px 10px}.heading>p{display:none}h1{font-size:32px}h1 span{font-size:15px}.heading{margin-bottom:16px}#stage{border-radius:12px}.toolbar{padding:8px;flex-wrap:wrap}.toolbar>span{display:none}.toolbar button{padding:9px}.below{display:block}.cta{display:block;margin-top:16px}.overlay{padding:15px}#start{margin:10px}.overlay h2{margin:5px 0}#stage:fullscreen #screen{width:min(100%,calc((100dvh - 190px)*4/3));max-height:calc(100dvh - 190px)}}@media(max-width:400px){#touch{gap:10px;padding:10px}.spells button{min-width:26px}.dpad{grid-template:repeat(2,40px)/repeat(3,40px)}}
/* Embedded game within the project case. Standalone layout stays unchanged. */
html.md-embedded,html.md-embedded body{background:#fff;margin:0;min-height:0}
.md-embedded header,.md-embedded .heading,.md-embedded .below{display:none}
.md-embedded main{padding:0;max-width:none}
.md-embedded #stage{border:0;border-radius:0;box-shadow:none}