*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0a1124;color:#fff;font-family:ui-monospace,'Courier New',monospace;touch-action:manipulation;overscroll-behavior:none}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;color:#effbff;background:#1d324b;border:2px solid #53718c;border-radius:9px;padding:12px 20px;box-shadow:0 4px 0 #08111f;letter-spacing:.04em;font-weight:900}button:focus-visible,select:focus-visible{outline:3px solid #ffda76;outline-offset:4px}button:active{transform:translateY(3px);box-shadow:none}button:disabled{opacity:.55;cursor:default}.primary{background:#ffcc64;color:#17243a;border-color:#fff1ae;box-shadow:0 5px 0 #a96737}#screen{width:100%;height:100%;position:relative;isolation:isolate;max-width:1800px;margin:auto}canvas{width:100%;height:100%;display:block}#tools{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));display:flex;gap:7px;z-index:8}#tools button{font-size:20px;line-height:1;padding:7px 11px;background:#0d1c30dc;border-color:#52748a;box-shadow:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:60px 20px 20px;background:#070e21a3;z-index:5;overflow:auto;backdrop-filter:blur(3px)}[hidden]{display:none!important}.menu-card{text-align:center;width:min(460px,90%)}.eyebrow{font-size:12px;letter-spacing:.24em;color:#9cd0df}.menu-card h1{margin:12px 0 20px;line-height:.83;transform:rotate(-4deg);font-family:Impact,'Arial Black',sans-serif;letter-spacing:3px;text-shadow:3px 3px 0 #2f294f,6px 6px 0 #873d4e,8px 10px 0 #091227}.menu-card h1 span{display:block;color:#ffe6a2;font-size:clamp(68px,12vw,104px)}.menu-card h1 strong{display:block;color:#ff715f;font-size:clamp(61px,11vw,91px)}#tagline{font-size:15px;line-height:1.6;color:#d1e0ed;margin:24px 0 20px}.menu-card>.primary{width:100%;font-size:21px;padding:16px}.row{display:flex;gap:12px;justify-content:center;margin:15px 0}.row>*{flex:1}select{margin-top:10px;background:#122138;color:#d7e7ee;border:1px solid #567187;padding:8px;border-radius:5px}.small{font-size:11px;line-height:1.65;color:#a3bbcd}.card{width:min(560px,96%);padding:26px;text-align:center;border:2px solid #618399;border-top:6px solid #ffcf6c;background:linear-gradient(140deg,#22344f,#101e35);border-radius:12px;box-shadow:0 15px 50px #0008}.card h2{color:#ffdc8a;font-size:clamp(23px,4vw,34px);margin:8px 0 22px}.card p{line-height:1.7}.card>button{margin:8px}.card #score{font-size:36px;color:#fff;font-weight:900}.card #initials{max-width:280px;margin:12px auto}.card #initials button{font-size:32px}.card #initials button.selected{border-color:#ffdc75;background:#456181}#status{font-size:12px;color:#ffde91}#panelBody{line-height:1.65;font-size:14px;max-height:48vh;overflow:auto;text-align:left}#panelBody ol{padding-left:32px}#keys{position:absolute;left:9%;width:82%;display:flex;gap:2%;z-index:3;height:13%}#keys button{position:relative;flex:1;padding:0;font-size:clamp(24px,4vw,42px);border:3px solid var(--light);border-radius:15px;background:linear-gradient(180deg,var(--color),color-mix(in srgb,var(--color) 40%,#172039));box-shadow:0 8px 0 color-mix(in srgb,var(--color) 30%,#101725),inset 0 4px 0 #ffffff40;color:white;text-shadow:0 2px 3px #000a;transition:filter .08s}#keys button.selected:after{content:'▼';position:absolute;top:-31px;left:calc(50% - 10px);font-size:20px;color:#fff;text-shadow:0 2px 3px #000}#keys button.lit{filter:brightness(1.8);transform:translateY(4px);box-shadow:0 0 32px var(--color),inset 0 0 25px #fff8}#keys button:disabled{opacity:1;cursor:default}#keys button:disabled:not(.lit){filter:saturate(.75)}body.full #screen{max-width:none}@media(max-height:520px) and (orientation:landscape){.overlay{padding:38px 16px 8px}.menu-card{width:450px}.menu-card h1{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:10px}.menu-card h1 span,.menu-card h1 strong{font-size:55px}#tagline{margin:10px;font-size:12px}.eyebrow{margin:4px}.menu-card>.primary{padding:10px;font-size:16px}.row{margin:10px 0}.small{margin:5px}select{padding:5px}.card{padding:12px}.card h2{margin:4px}.card p{margin:6px}.card #initials button{font-size:24px;padding:6px}.card #score{font-size:26px}}@media(max-width:600px){.card{padding:22px 15px}button{padding:12px}.eyebrow{font-size:10px}.menu-card{width:100%}#keys{left:5%;width:90%;height:10%}#keys button{border-radius:10px}#tools button{font-size:18px;padding:8px}}

#hint{position:absolute;right:2%;top:20%;z-index:4;font-size:12px;padding:10px 12px;color:#ffe399;border-color:#a08d5c;background:#152b42;max-width:170px}#hint.selected{outline:3px solid #ffdf89;outline-offset:4px}#hint:disabled{opacity:.45}@media(orientation:portrait){#hint{top:22%;right:auto;left:50%;transform:translateX(-50%);max-width:90%;white-space:nowrap}}@media(max-height:450px) and (orientation:landscape){#hint{font-size:10px;padding:8px;right:1%;top:21%;max-width:130px}}