*{box-sizing:border-box}body{margin:0;background:#14232d;color:#eceddf;font:14px system-ui,sans-serif}header{display:flex;gap:10px;align-items:center;padding:12px 3vw;flex-wrap:wrap;border-bottom:1px solid #36505a}a{color:#c4d7d5;text-decoration:none}strong{margin-right:auto}button{font:inherit;color:#eff4de;background:#28444c;border:1px solid #5b7a7b;border-radius:9px;padding:10px 12px;cursor:pointer;touch-action:none;user-select:none}button:active{background:#557b75}main{position:relative;max-width:1000px;margin:14px auto;padding:0 14px}#hud{display:flex;justify-content:space-between;gap:8px;font-size:13px}#hint{height:32px;padding:6px 8px;background:#203b46;color:#d9edb6;margin:7px 0;border-left:3px solid #add09b}canvas{width:100%;display:block;aspect-ratio:16/9;border-radius:12px;background:#9cc7c5}#overlay{position:absolute;top:75px;left:8%;right:8%;padding:20px;background:#142833f2;border:1px solid #a3c5b1;border-radius:14px;text-align:center;max-height:calc(100% - 155px);overflow:auto}h1{font-size:42px;color:#d7eab0;margin:0 0 10px}p{line-height:1.7}#primary{background:#c0d78c;color:#1c363c;min-width:160px;font-weight:bold}nav{display:flex;gap:8px;margin:12px 0}nav button{flex:1;min-height:58px}.note{font-size:12px;color:#9eb7bc;text-align:center}@media(max-width:600px){header{padding:8px;gap:5px;font-size:12px}header button{padding:8px}main{margin:8px auto;padding:0 6px}#hud{font-size:11px}#hint{font-size:12px;height:auto;min-height:30px}#overlay{top:68px;left:3%;right:3%;padding:12px;font-size:12px;max-height:calc(100% - 135px)}h1{font-size:28px}#overlay p{margin:7px 0}nav{gap:5px}nav button{font-size:13px;padding:6px}.note{margin:0}}@media(max-height:500px) and (min-width:600px){header{padding:4px}main{max-width:620px;margin:3px auto}#hint{height:24px;padding:2px 6px;margin:3px 0;font-size:12px}nav{margin:5px 0}nav button{min-height:40px}#overlay{top:49px;padding:8px;font-size:12px}#overlay p{margin:4px}h1{font-size:25px}.note{display:none}}

@media(max-height:500px) and (min-width:600px){main{max-width:min(620px,calc((100dvh - 165px)*16/9))}#overlay{max-height:calc(100% - 110px)}header{font-size:12px}header button{padding:6px 9px}}