*{box-sizing:border-box}body{margin:0;background:#10171c;color:#f7f6ea;font-family:system-ui,sans-serif;overflow:hidden}main{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);margin:auto;top:50vh;transform:translateY(-50%);overflow:hidden;background:#182c36}canvas{width:100%;height:100%;display:block}#hud{position:absolute;inset:3% 3% auto;display:flex;align-items:center;gap:24px;font-size:clamp(13px,1.5vw,23px);font-weight:650}#hud[hidden]{display:none}#phase{padding:10px 18px;background:#111c27e8;border-left:4px solid #ffe23e}#count{margin-left:auto;background:#111c27e8;padding:10px 18px}button{font:inherit;cursor:pointer;color:#fff;background:#263640;border:1px solid #60717c;border-radius:6px;padding:12px 20px}button:focus-visible{outline:3px solid white;outline-offset:4px}.primary{background:#ffe23e;color:#152028;border:0;font-weight:750}#overlay{position:absolute;inset:0;background:#0c161de8;display:grid;place-items:center}#overlay[hidden]{display:none}.card{width:90%;text-align:center}.eyebrow{letter-spacing:.2em;font-size:clamp(10px,1vw,16px);color:#c3cdd2}h1{font-size:clamp(38px,7vw,100px);letter-spacing:-.06em;line-height:1.1;margin:12px}h1 span{color:#ffe23e}#intro{font-size:clamp(16px,2vw,28px);line-height:1.5}.route{margin:24px auto;color:#e8e7db;font-size:clamp(11px,1.3vw,20px)}.route b{color:#ffe23e;margin:0 10px}.keys{color:#aebdc7;font-size:clamp(12px,1.3vw,20px);line-height:1.9}#foot{color:#91a3af;font-size:clamp(10px,1vw,16px)}#toast{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);background:#111b28ee;border:1px solid #71828c;padding:12px 22px;border-radius:4px;font-size:clamp(13px,1.5vw,22px);text-align:center;pointer-events:none;opacity:0;transition:opacity .15s;width:max-content;max-width:85%}#toast.show{opacity:1}
#overlay.win{background:#0c161dc4}

#objective{position:absolute;left:3%;top:11%;margin:0;font-size:clamp(13px,1.6vw,22px);font-weight:650;color:#ffe9a0;max-width:58%;padding:8px 12px;background:#111c27e8}
#work{position:absolute;right:3%;top:12%;width:29%;padding:12px;background:#111c27ed;border:1px solid #5d737c;border-radius:5px;font-size:clamp(12px,1.25vw,19px)}
#work-title{display:block;color:#c3d1d4;margin-bottom:7px}.work-card{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;margin-top:5px;border:1px dashed #617581;color:#a4b4bd;background:#26353e}.work-card small{font-size:.8em}.work-card.acquired{border-style:solid;border-color:#dfc856;color:#fff0b0;animation:card-in .3s ease-out}.work-card.coded{border-color:#8de0b5}.work-card span{white-space:nowrap}
#interaction{position:absolute;bottom:19%;left:50%;transform:translateX(-50%);padding:10px 18px;background:#18242df2;border:2px solid #ffe23e;color:#fff2b7;font-size:clamp(13px,1.6vw,23px);font-weight:700;text-align:center;max-width:82%;pointer-events:none}
#work[hidden],#objective[hidden],#interaction[hidden]{display:none}@keyframes card-in{from{transform:translateY(-7px);opacity:.4}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){.work-card.acquired{animation:none}}

#character-screen{position:absolute;inset:0;z-index:5;background:#101c26f5;display:grid;place-items:center;padding:3%;overflow:auto}#character-screen[hidden]{display:none}.character-card{width:min(920px,96%);text-align:center;font-size:clamp(14px,1.45vw,23px)}.character-card h2{font-size:clamp(25px,3vw,45px);margin:16px 0}.character-card button{margin:6px}.character-card .muted{font-size:.8em;color:#adbec6;line-height:1.6}.character-card form{max-width:680px;margin:auto;text-align:left}.character-card textarea{display:block;width:100%;resize:vertical;max-height:150px;background:#22343f;color:#fff4ce;border:1px solid #8d9e9c;padding:14px;font:inherit;border-radius:5px;margin-top:10px}.character-card label{font-weight:700}#description-count{text-align:right;font-size:.7em;margin:4px}#character-status{color:#ffe38b;font-size:.85em;line-height:1.4;max-width:760px;margin:14px auto}#preview-image{width:210px;height:210px;object-fit:contain;background:repeating-conic-gradient(#31414b 0% 25%,#25343e 0% 50%) 50%/24px 24px;border:1px solid #768a91;border-radius:10px;margin:8px}.waiting-orbit{font-size:80px;color:#ffe23e;animation:orbit 2.5s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.waiting-orbit{animation:none}}
button:disabled{opacity:.5;cursor:not-allowed}

.character-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:740px;margin:22px auto}.character-choice{display:flex;flex-direction:column;align-items:stretch;gap:10px}.choice-picture{height:180px;display:grid;place-items:center;background:linear-gradient(145deg,#263944,#182731);border:1px solid #526772;border-radius:12px}.choice-picture canvas,.choice-picture svg{width:240px;max-width:100%;height:180px}.character-choice button{margin:0;min-height:64px;font-size:clamp(14px,1.35vw,20px)}
@media(max-height:760px){#character-screen [data-page="home"] h1{font-size:60px;margin:8px}.character-choices{margin:14px auto;gap:20px}.choice-picture,.choice-picture canvas,.choice-picture svg{height:150px}.character-choice button{min-height:56px}#character-screen [data-page="home"]>p{margin:10px 0}}
@media(max-width:520px){.character-choices{gap:12px}.character-choice button{font-size:13px;padding:10px}.choice-picture,.choice-picture canvas,.choice-picture svg{height:125px}}

#access-form{padding:14px;margin:16px auto;border:1px solid #60717c;border-radius:6px}#access-form[hidden]{display:none}#access-code{display:block;width:100%;font:inherit;padding:12px;margin:10px 0;background:#22343f;color:#fff;border:1px solid #8d9e9c;border-radius:5px}

.character-download{display:inline-block;text-decoration:none;color:#fff;background:#263640;border:1px solid #60717c;border-radius:6px;padding:12px 20px;margin:6px}.character-download:focus-visible{outline:3px solid white;outline-offset:4px}