@font-face{font-family:Munch;src:url('Mascot.ttf')}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#10252e;color:#fff9e8;font-family:system-ui,sans-serif}body{padding:14px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center}header{width:min(1040px,100%);display:flex;align-items:center;justify-content:space-between;margin:4px 0 13px}h1{font:clamp(20px,3vw,31px)/1 Munch,system-ui;margin:0;color:#b1ea42;letter-spacing:.7px}h1 span{color:#ffa34b}header p{font-size:12px;color:#b4d0d6;margin:7px 0 0}button{font:700 13px system-ui;color:#fff5df;background:#28454f;border:2px solid #4b6870;border-radius:12px;padding:10px 15px;cursor:pointer}button:hover{background:#345966}button:focus-visible,canvas:focus-visible{outline:3px solid #ffb34c;outline-offset:4px}main{width:100%;display:flex;align-items:center;flex-direction:column}#stage{position:relative;width:min(1040px,100%,calc((100dvh - 150px)*1.5));aspect-ratio:3/2;border-radius:22px;overflow:hidden;box-shadow:0 14px 48px #04141c80;border:2px solid #36515b}canvas{width:100%;height:100%;display:block;touch-action:none;outline:none;user-select:none;-webkit-user-select:none}#loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;background:#182e37;font:24px Munch,system-ui}#loading[hidden]{display:none}.tip{font-size:12px;color:#bcd2d3;text-align:center;margin:12px 0 0}.tip span{margin-left:18px;color:#829fa8}footer{font-size:10px;color:#809da6;margin-top:12px}#rotate{display:none;font-size:12px;color:#ffcb73}.sr-only,.accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.accessible:focus-within{position:static;clip:auto;width:auto;height:auto;margin:12px;display:flex;gap:8px;flex-wrap:wrap;white-space:normal} @media(orientation:portrait) and (max-width:600px){#rotate{display:block}#stage{width:100%}.tip span{display:block;margin:6px 0}header p{display:none}body{padding:10px}h1{font-size:19px}#sound{font-size:11px;padding:8px}}@media(orientation:landscape) and (max-height:550px){body{padding:0 max(0px,env(safe-area-inset-right)) 0 max(0px,env(safe-area-inset-left))}header{display:contents}header>div,footer,.tip{display:none}#stage{width:min(100vw,calc(100dvh*1.5));border:0;border-radius:0;box-shadow:none}#rotate{display:none}#sound{position:fixed;right:5px;top:5px;max-width:44px;font-size:9px;padding:5px;z-index:2}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
footer { text-align: center; }
footer a {
  color: #d8e9dd;
  margin-right: 16px;
  text-underline-offset: .2em;
}
footer a:focus-visible {
  outline: 2px solid #ffb34c;
  outline-offset: 3px;
}