*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:system-ui,sans-serif;background:#111b21;color:#f4f4e8}body{display:grid;grid-template-rows:80px minmax(0,1fr) 64px 28px}header{padding:12px 24px;display:flex;gap:12px;align-items:center;border-bottom:1px solid #3c4c51}header div{margin-right:auto}small{font-size:10px;letter-spacing:3px;color:#a2c3b9}h1{font:600 clamp(16px,2.7vw,25px) Georgia,serif;margin:6px 0 0}button{font:600 13px system-ui;border:1px solid #647b7c;border-radius:9px;padding:11px 16px;background:#233b3e;color:#f4f4e8;cursor:pointer;touch-action:none;user-select:none}button:hover,button:active{background:#4d7067}button:focus-visible{outline:3px solid #f1ce8d}main{position:relative;min-height:0;background:#000}iframe{width:100%;height:100%;border:0;display:block}aside{position:absolute;right:22px;top:20px;width:min(350px,calc(100% - 44px));background:#13272af5;border:1px solid #6a8a82;box-shadow:0 12px 70px #0008;border-radius:18px;padding:24px;z-index:2}aside[hidden]{display:none}aside h2{font:28px Georgia;margin:0 0 16px}aside p{font-size:14px;line-height:1.6;color:#d1e1da}.credit{font-size:11px!important;color:#94aba3!important}nav{display:flex;justify-content:center;align-items:center;gap:8px;background:#17292d;padding:8px}nav button{min-width:65px;flex:0 1 110px}footer{display:flex;justify-content:space-between;padding:5px 22px;font-size:10px;letter-spacing:1px;color:#9bb4ae}@media(max-width:600px){body{grid-template-rows:76px minmax(0,1fr) 73px 30px}header{padding:8px 10px;gap:6px}header small{font-size:8px;letter-spacing:1px}header button{padding:9px 8px;font-size:10px}h1{max-width:210px}nav{gap:4px;padding:6px}nav button{min-width:0;padding:14px 5px;font-size:12px}footer{padding:5px 10px;font-size:8px;letter-spacing:0}aside{padding:20px;top:12px;right:12px;width:calc(100% - 24px)}}
#arena{position:relative;isolation:isolate}#wrapper{position:absolute;inset:0}#arena canvas{position:absolute;max-width:100%;max-height:100%;image-rendering:pixelated}#arena>canvas{width:100%;height:100%}header,nav,footer{position:relative;z-index:10}aside{z-index:20}
#arena>canvas{max-width:none;max-height:none;width:auto;height:auto}nav span{font-size:13px;color:#c1d7cd}#jc{display:none;position:absolute;bottom:0;z-index:1}#jb{width:100px;height:100px;border-radius:50%;background:#fff2;position:relative}#jh{width:40px;height:40px;background:#c9b9b9;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
nav{flex-wrap:wrap;height:auto;min-height:64px}#faucets{display:flex;gap:6px}nav button{min-width:0;flex:0 1 auto}