:root{--paper:#f5f4ef;--ink:#30302e;--blue:#245ac0;--red:#bf382f;--u:40px;--stroke:calc(var(--u)*.1);--wall:calc(var(--u)*.16)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--paper)}
body{font-family:ui-monospace,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,monospace;font-weight:900;color:var(--ink);user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0;touch-action:manipulation;appearance:none;-webkit-appearance:none;user-select:none;-webkit-user-select:none}
:focus,:focus-visible{outline:none}
button::-moz-focus-inner{border:0}
button:active{filter:brightness(.88)}
[hidden]{display:none!important}
#viewport{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:manipulation}
#world{--stroke:calc(var(--u)*.1);--wall:calc(var(--u)*.16);--warp-stroke:calc(var(--u)*.152);position:absolute;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(to right,rgba(50,50,45,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(50,50,45,.1) 1px,transparent 1px);background-size:var(--u) var(--u);touch-action:manipulation}
.unit{position:absolute;width:var(--u);height:var(--u);flex:none}
.cell-text{display:flex;flex-wrap:wrap;align-content:start;margin:0;padding:0;line-height:var(--u);text-align:left;gap:0}
.cell-glyph{width:var(--u);height:var(--u);flex:0 0 var(--u);display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--u)*.74);font-weight:900;line-height:1;white-space:pre;position:relative}
.cell-glyph>svg{width:76%;height:76%;display:block;flex:none}
.enclosure,.room{position:absolute;border:var(--wall) solid var(--ink)}
#counter{z-index:2}
#counter>*{position:absolute}
#crack{position:absolute;width:var(--u);height:calc(var(--u)*.28);z-index:3;pointer-events:none}
#crack svg{width:100%;height:100%;display:block;overflow:visible}#crack path{fill:none;stroke:var(--paper);stroke-width:5;stroke-linejoin:miter}
#crack[data-hits="1"] path{stroke-width:8}#crack[data-hits="2"] path{stroke-width:12}
#crack.open{height:var(--wall);background:var(--paper)}#crack.open svg{display:none}
#star{position:absolute;padding:0;border:0;background:none;font-size:calc(var(--u)*.75);z-index:8;line-height:1}
.upper-world{background-image:none!important}
#arena-grid,#arena-entry{position:absolute;background-color:var(--paper);background-image:linear-gradient(to right,rgba(50,50,45,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(50,50,45,.1) 1px,transparent 1px);background-size:var(--u) var(--u)}
#arena{z-index:1;pointer-events:none}#arena-entry{z-index:2}#arena-entry::before{content:"";position:absolute;left:0;right:0;top:calc(var(--wall)*-1);height:calc(var(--wall)*2);background:var(--paper)}
#boss{position:absolute;z-index:3;pointer-events:none;transition:left .12s linear,top .12s linear}
.boss-cell{background:var(--red)}.boss-face{position:absolute;inset:0}
.boss-face::before,.boss-face::after{content:"";position:absolute;width:calc(var(--u)*.4);height:calc(var(--u)*.4);top:25%;background:var(--paper);animation:blink 4.8s infinite}
.boss-face::before{left:22%}.boss-face::after{right:22%}
#boss.tiny .boss-cell{clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,80% 85%,60% 85%,60% 100%,40% 100%,40% 85%,20% 85%,20% 100%,0 100%)}
#boss.tiny .boss-face::before,#boss.tiny .boss-face::after{width:16%;height:17%;top:28%}
.shot{position:absolute;z-index:8;pointer-events:none;transition:transform .2s linear,opacity .24s ease-in}
#digits{display:flex;height:var(--u)}
.digit{position:relative;width:var(--u);height:var(--u);font-weight:900}
.zero{padding:0;border:0;background:none;cursor:default}
#menu{position:absolute;display:flex;align-items:center;gap:var(--u);height:var(--u);white-space:nowrap;z-index:8}
#menu button{border:0;background:none;padding:0;height:var(--u);font-weight:900;flex:none}
#help-open{width:calc(var(--u)*3)}#settings-open{width:calc(var(--u)*2)}
.warp,.close{border:0;padding:0;background:transparent}
.warp,.close:not(.unframed){cursor:default}
.warp::before,.close:not(.unframed)::before{content:"";position:absolute;inset:12%;border:var(--warp-stroke) solid var(--ink);pointer-events:none}
.close-mark{position:absolute;inset:0;pointer-events:none}
.close-mark::before,.close-mark::after{content:"";position:absolute;left:50%;top:50%;width:45%;height:var(--stroke);background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.close-mark::after{transform:translate(-50%,-50%) rotate(-45deg)}
.unframed .close-mark::before,.unframed .close-mark::after{width:56%}
.check-mark{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--u)*.66);line-height:1;pointer-events:none}
.enemy,.player{background:var(--red);pointer-events:none}
.player{background:var(--blue);z-index:7;transition:transform 70ms linear;will-change:transform}
.enemy{clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,80% 85%,60% 85%,60% 100%,40% 100%,40% 85%,20% 85%,20% 100%,0 100%)}
.enemy::before,.player::before,.enemy::after,.player::after{content:"";position:absolute;width:16%;height:17%;top:28%;background:var(--paper)}
.enemy::before,.enemy::after{animation:blink 4.8s infinite;animation-delay:var(--blink-delay,0s)}
.player::before,.player::after{animation:blink 4.1s infinite;animation-delay:-1.2s}
@keyframes blink{0%,92%,96%,100%{transform:scaleY(1)}94%,95%{transform:scaleY(.08)}}
.enemy::before,.player::before{left:21%}.enemy::after,.player::after{right:21%}
#enemies>.enemy{z-index:3}.panel .enemy{z-index:6}
#shade{position:absolute;inset:0;background:rgba(30,30,28,.22);z-index:4}
.panel{position:absolute;border:var(--wall) solid var(--ink);background-color:var(--paper);background-image:linear-gradient(to right,rgba(50,50,45,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(50,50,45,.1) 1px,transparent 1px);background-size:var(--u) var(--u);background-origin:border-box;z-index:5}
.panel h2{position:absolute;left:calc(var(--u) - var(--edge-x));top:calc(var(--u) - var(--edge-y));margin:0;height:var(--u);width:calc(var(--text-cols)*var(--u));font-weight:900}
.help-copy{position:absolute;left:calc(var(--u) - var(--edge-x));top:calc(var(--u)*2 - var(--edge-y));width:calc(var(--text-cols)*var(--u));font-weight:900}
.help-copy p{margin:0}
.setting-box{position:absolute;height:var(--u);background:var(--paper);border:0;padding:0;box-shadow:inset 0 0 0 calc(var(--u)*.06) var(--ink);flex-wrap:nowrap;justify-content:center;white-space:nowrap}
#controls,#fire-controls{--key:var(--u);position:absolute;width:calc(var(--key)*3);height:calc(var(--key)*3);z-index:8;display:grid;grid-template-columns:repeat(3,var(--key));grid-template-rows:repeat(3,var(--key));pointer-events:none;touch-action:none}
#controls button,#fire-controls button{position:relative;width:var(--key);height:var(--key);border:0;background:var(--blue);color:var(--paper);font-size:calc(var(--key)*.55);line-height:1;padding:0;box-shadow:inset 0 0 0 calc(var(--key)*.035) var(--paper);touch-action:none;pointer-events:auto}
#fire-controls button{background:var(--red)}
#controls .pressed{filter:brightness(.78)}
#controls .up,#fire-controls .up{grid-column:2;grid-row:1}
#controls .left,#fire-controls .left{grid-column:1;grid-row:2}
#controls .down,#fire-controls .down{grid-column:2;grid-row:3}
#controls .right,#fire-controls .right{grid-column:3;grid-row:2}
.compact-controls #controls,.compact-controls #fire-controls{height:calc(var(--key)*2);grid-template-rows:repeat(2,var(--key))}
.compact-controls #controls .down,.compact-controls #fire-controls .down{grid-row:2}
#result{z-index:10;background-image:none}
#result-close{z-index:1}
#result p{position:absolute;left:calc(var(--u) - var(--edge-x));top:calc(var(--u)*3 - var(--edge-y));width:calc(var(--text-cols)*var(--u));margin:0}
.result-actions{position:absolute;left:calc(var(--u) - var(--edge-x));top:calc(var(--u)*6 - var(--edge-y));display:flex;gap:var(--u)}
.result-actions button,.result-actions a{width:calc(var(--u)*5);height:var(--u);border:0;background:var(--paper);font:inherit;font-weight:900;padding:0;box-shadow:inset 0 0 0 calc(var(--u)*.06) var(--ink);flex-wrap:nowrap}
.result-actions a{text-decoration:none;cursor:pointer;touch-action:manipulation}
.result-actions a:active{filter:brightness(.88)}
#share{background:#000;color:#fff;box-shadow:none}
#share-options{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
#share-options a{display:flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid var(--ink);font:inherit;font-size:16px;background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;touch-action:manipulation}
.portrait .result-actions{gap:0}
#volume-label{position:absolute;height:var(--u);width:calc(var(--u)*2);flex-wrap:nowrap}
#hint-link,#other-games{position:absolute;height:var(--u);color:var(--ink);text-decoration:none;flex-wrap:nowrap}
#hint-link{width:calc(var(--u)*6)}#other-games{width:calc(var(--u)*5)}
#hint-note{position:absolute;width:calc(var(--text-cols)*var(--u));margin:0;font-size:clamp(10px,calc(var(--u)*.32),14px);line-height:1.4;font-weight:500;color:#686861;overflow-wrap:anywhere}
.site-dialog{position:fixed;inset:0;width:min(420px,calc(100% - 28px));max-height:calc(100dvh - 28px);margin:auto;padding:30px 22px 22px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.7;font-weight:600;overflow:auto;overscroll-behavior:contain}
.site-dialog::backdrop{background:rgba(30,30,28,.45)}
.site-dialog h2{font-size:22px;margin:0 0 20px}.site-dialog p{margin:12px 0}
.dialog-close{position:absolute;right:10px;top:8px;width:32px;height:32px;border:0;background:none;font-size:26px}
.site-dialog a{display:block;padding:16px 0;border-top:1px solid #bbb;color:var(--ink);text-decoration:none}
.site-dialog small{display:block;font-size:12px;font-weight:400;margin-top:6px}.site-dialog .site-note{font-size:12px;color:#686861;font-weight:400}
.site-dialog button:not(.dialog-close){padding:6px 12px;border:1px solid var(--ink);background:var(--paper);font-size:16px}
#site-volume{position:absolute;width:calc(var(--u)*8);height:var(--u);padding:0;margin:0;touch-action:pan-x}
#site-volume:disabled{opacity:.4;accent-color:#888;cursor:default}
#records-data{display:grid;grid-template-columns:1fr auto;gap:12px}#records-data dd{margin:0}
.connection{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);border:2px solid var(--ink);padding:20px;z-index:20;max-width:calc(100% - 24px);font-size:16px}
.connection button{background:var(--paper);border:1px solid var(--ink);padding:8px 12px}
.sr-only{position:fixed;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){.player{transition:none}}
@media(prefers-reduced-motion:reduce){.enemy::before,.enemy::after,.player::before,.player::after{animation:none}}