*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0}body{background:#133c4e;color:white;font-family:monospace;text-align:center;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}h1{color:#ffe16a;text-shadow:3px 3px #8c4226;margin:5px 0;font-size:clamp(20px,4vh,30px);line-height:1.2;flex-shrink:0}nav{display:flex;gap:14px;justify-content:center;align-items:center;margin:4px 0 6px;flex-wrap:wrap;font-size:13px;flex-shrink:0}a{color:#84eaff}canvas{display:block;flex:none;image-rendering:pixelated;border:4px solid #f2bf60;touch-action:none;max-width:96vw;width:240px;height:auto}button{background:#775337;color:white;font:bold 23px monospace;border:3px solid #e9b25c;border-radius:4px;padding:7px 12px;min-height:43px;touch-action:manipulation}.controls{display:flex;gap:12px;justify-content:flex-end;width:min(96vw,460px);margin:5px auto 0;padding:0 4px;flex-shrink:0}.controls button{min-width:75px}.note{margin:3px auto 5px;color:#c8d5dd;font-size:clamp(9px,1.9vh,12px);flex-shrink:0}body{min-height:100vh;min-height:100dvh}@media(max-height:510px){h1{font-size:18px;margin:1px}nav{font-size:11px;margin:2px}button{min-height:36px;padding:3px 8px}.controls{margin-top:2px}.note{margin:1px;font-size:10px}}
.game-version{color:#bddde1;font-size:11px;margin:2px 0 5px;flex-shrink:0;padding:0 4px}body{overflow-y:auto}

#welcome-layer{display:none;position:fixed;inset:0;background:#041a25d9;z-index:100;align-items:center;justify-content:center;padding:15px}#welcome-layer.visible{display:flex}.welcome-panel{width:min(430px,96vw);max-height:95vh;overflow:auto;background:#12394e;border:4px solid #ffdb56;border-radius:12px;padding:17px;text-align:center;box-shadow:0 10px 40px #0008;color:#fff}.welcome-panel h2{color:#ffdc56;margin:0 0 8px}.welcome-panel h3{margin:6px 0 12px}.welcome-panel button{width:100%;display:block;margin:12px 0;font-size:15px;padding:12px 7px;line-height:1.45}.welcome-panel button small{display:block;font-size:12px}.welcome-panel button[hidden],#welcome-name-row[hidden]{display:none}.welcome-panel input{width:100%;font-size:18px;padding:12px;background:#fff5d6;color:#26333a}.welcome-panel #welcome-error{color:#ffe181;font-size:12px}
/* Coco Panic retro About dialog */
#coco-about-layer{position:fixed;inset:0;z-index:10010;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.coco-about-panel{box-sizing:border-box;width:min(420px,96vw);padding:22px 18px;text-align:center;background:#16394d;color:white;border:4px solid #ffc65e;box-shadow:7px 7px #071a26;font:700 14px/1.6 monospace}
.coco-about-panel h2{color:#ffd856;margin:0 0 8px;font-size:23px}.coco-about-panel h3{color:#fff;margin:6px 0 14px}.coco-about-panel p{margin:9px 0}.coco-about-panel a{color:#84e8ff}.coco-about-panel button{display:block;width:100%;margin-top:18px;padding:12px;background:#89552e;border:3px solid #ffc65e;color:#fff;font:700 17px monospace;cursor:pointer}