html,body{background:#14110f;justify-content:center;align-items:center;height:100%;margin:0;display:flex;overflow:hidden}#app{flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100%;display:flex}.button-legend{letter-spacing:.01em;color:#a8967a;text-align:left;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:monospace;font-size:clamp(7px,.7vw,10px);line-height:1;position:absolute}.button-legend-n{top:19%;left:89.05%}.button-legend-p{top:31%;left:89.46%}.button-legend-m{top:43%;left:89.66%}.shell-wrap{aspect-ratio:2046/1287;width:min(96vw,152.615vh,1300px);position:relative}.touch-controls,.rotate-hint{display:none}.shell-img{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.screen-window{justify-content:center;align-items:center;width:41.9%;height:46.9%;display:flex;position:absolute;top:19.9%;left:29.3%;overflow:hidden}canvas{image-rendering:pixelated;width:100%;height:auto;display:block}.touch-zone{touch-action:none;-webkit-tap-highlight-color:transparent;width:50%;height:50%;position:absolute}.touch-zone-ul{top:0;left:0}.touch-zone-ur{top:0;right:0}.touch-zone-ll{bottom:0;left:0}.touch-zone-lr{bottom:0;right:0}.shell-btn{touch-action:none;-webkit-tap-highlight-color:transparent;width:11%;height:9%;position:absolute;transform:translate(-50%,-50%)}.shell-btn-n{top:16.3%;left:83.6%}.shell-btn-p{top:27.2%;left:83.6%}.shell-btn-m{top:39.2%;left:83.6%}.shell-btn-o{width:13%;height:11%;top:62.9%;left:83.6%}.shell-btn-k{width:13%;height:11%;top:78.5%;left:83.8%}.shell-btn-w{width:13%;height:11%;top:62.9%;left:13.2%}.shell-btn-s{width:13%;height:11%;top:78.5%;left:13%}html.touch-layout{--vw:100vw;--vh:100vh;--pad:10px;--frame:6px;--gap:12px;--ctrl:76px}@supports (height:100dvh){html.touch-layout{--vw:100dvw;--vh:100dvh}}html.touch-layout,html.touch-layout body{height:var(--vh);overscroll-behavior:none}html.touch-layout .shell-img,html.touch-layout .button-legend,html.touch-layout .shell-btn{display:none}html.touch-layout .shell-wrap{aspect-ratio:auto;justify-content:center;align-items:center;gap:var(--gap);--game-w:min(calc(var(--vw) - var(--ctrl) - var(--gap) - 2 * var(--pad) - 2 * var(--frame)), calc((var(--vh) - 2 * var(--pad) - 2 * var(--frame)) * 1.6));flex-direction:row;width:auto;display:flex}html.touch-layout .screen-window{width:var(--game-w);height:calc(var(--game-w) / 1.6);border:var(--frame) solid #b8964f;background:#efe8d6;border-radius:10px;flex:none;position:relative;top:auto;left:auto;box-shadow:0 0 0 2px #2a2118,inset 0 0 0 1px #00000059}html.touch-layout .touch-controls{flex-direction:column;flex:none;gap:10px;display:flex}html.touch-layout .touch-btn{width:var(--ctrl);color:#eadcbf;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#1f1a15;border:2px solid #b8964f;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:64px;padding:0;font-family:monospace;display:flex}html.touch-layout .touch-btn:active{background:#3a2f23}.touch-btn-letter{font-size:26px;font-weight:700;line-height:1}.touch-btn-caption{opacity:.75;white-space:nowrap;font-size:10px;line-height:1}@media (orientation:portrait) and (width<=599px){html.touch-layout .shell-wrap{--game-w:min(calc(var(--vh) - var(--ctrl) - var(--gap) - 2 * var(--pad) - 2 * var(--frame)), calc((var(--vw) - 2 * var(--pad) - 2 * var(--frame)) * 1.6));transform:rotate(90deg)}html.touch-layout .rotate-hint{top:max(10px, env(safe-area-inset-top));color:#eadcbf;white-space:nowrap;pointer-events:none;z-index:10;background:#1f1a15d9;border-radius:999px;padding:6px 12px;font:13px monospace;display:block;position:fixed;left:50%;transform:translate(-50%)}}@media (orientation:portrait) and (width>=600px){html.touch-layout .shell-wrap{--game-w:min(calc(var(--vw) - 2 * var(--pad) - 2 * var(--frame)), calc((var(--vh) - var(--ctrl) - var(--gap) - 2 * var(--pad) - 2 * var(--frame)) * 1.6));flex-direction:column}html.touch-layout .touch-controls{flex-direction:row}html.touch-layout .touch-btn{width:96px;height:var(--ctrl)}}
