*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0c1022;color:#f8f2dc;font-family:system-ui,-apple-system,'Yu Gothic',sans-serif}body{display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 20%,#273359,#0c1022 65%)}.shell{width:min(94vw, min(80vh,720px))}header{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:0 0 12px}.brand{font-size:clamp(17px,3vw,24px);font-weight:900;line-height:1.1;color:#ffe176}.brand span{display:block;font-size:.62em;letter-spacing:.08em;color:#a6c5e5}.hud{display:flex;gap:clamp(8px,3vw,30px);text-align:right}.hud div{min-width:45px}.hud small{display:block;font-size:11px;color:#87a9cc;letter-spacing:.12em;font-weight:800}.hud b{font:800 clamp(17px,4vw,27px)/1.1 ui-monospace,monospace;color:#fff}.game-wrap{position:relative;aspect-ratio:1;box-shadow:0 22px 70px #0008,0 0 0 2px #657ca1;background:#354a79;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0a1025b8;backdrop-filter:blur(5px);padding:18px}.overlay.hidden{display:none}.panel{width:min(100%,450px);max-height:100%;overflow:auto;background:#17223d;border:2px solid #7893bd;padding:clamp(16px,4vw,30px);box-shadow:8px 8px 0 #081025}.eyebrow{color:#66ddea;font-size:12px;letter-spacing:.2em;font-weight:800}h1{font-size:clamp(25px,6vw,38px);margin:6px 0 8px;color:#ffe176}.panel p{line-height:1.65;margin:0 0 16px;font-size:14px}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.presets button{background:#283c63;color:#fff;border:1px solid #7591b8;padding:9px 3px;font-size:clamp(12px,2.5vw,15px);font-weight:800;cursor:pointer}.presets button.selected{background:#f6c84d;color:#121c32;border-color:#fff}.presets small{display:block;font-size:11px;font-weight:600}.custom{display:flex;align-items:center;justify-content:space-between;margin:14px 0;font-size:14px}.custom input{width:95px;background:#0d1730;border:1px solid #a4bedc;color:#fff;padding:8px;font-size:18px}.start{width:100%;background:#ffe176;color:#15172a;border:0;padding:12px;font-size:18px;font-weight:900;cursor:pointer}.result{margin-top:9px;color:#6de8e4;font-weight:700}.foot{display:flex;justify-content:space-between;color:#a4bbd7;padding:9px 0;font-size:13px}button:focus-visible,input:focus-visible{outline:3px solid #69e1ed;outline-offset:2px}@media(max-width:550px){body{padding:8px;align-items:start}.shell{width:min(98vw,calc(100vh - 105px));margin:auto}header{padding-top:5px}.panel p{font-size:13px}}

.enemy-options{border:1px solid #7591b8;margin:0 0 14px;padding:8px 12px 10px}.enemy-options legend{color:#a6c5e5;font-size:13px;font-weight:800;padding:0 5px}.enemy-options label{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 0;cursor:pointer}.enemy-options label b{margin-left:auto;color:#ffe176}.enemy-options input{accent-color:#ffe176;width:17px;height:17px;margin:0}

.result{white-space:pre-line;line-height:1.6}

@media (max-width:550px){
  .shell{width:min(calc(100vw - 24px),calc(100dvh - 98px));max-width:100%;margin:0 auto}
  .game-wrap:has(.overlay:not(.hidden)){aspect-ratio:auto;overflow:visible;box-shadow:none;background:transparent}
  .game-wrap:has(.overlay:not(.hidden)) canvas{display:none}
  .game-wrap .overlay:not(.hidden){position:static;display:block;inset:auto;padding:0;background:none;backdrop-filter:none}
  .game-wrap .overlay:not(.hidden) .panel{width:100%;max-height:none;overflow:visible;padding:18px}
}

.share.hidden{display:none}.share{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}.share-label{width:100%;font-size:13px;color:#a6c5e5;font-weight:800}.share a{display:inline-block;padding:9px 12px;background:#263d65;border:1px solid #8aa9d0;color:#fff;text-decoration:none;font-size:14px;font-weight:700}.share a:focus-visible{outline:3px solid #69e1ed;outline-offset:2px}

.enemy-options label[hidden],.unlock-toast[hidden]{display:none!important}.unlock-toast{position:fixed;z-index:9999;top:max(16px,env(safe-area-inset-top));right:16px;width:min(390px,calc(100vw - 32px));padding:16px 19px;border-radius:16px;background:#c6dc91;color:#1b2a1c;border:2px solid #edf5ba;box-shadow:0 12px 34px #0009;pointer-events:none;display:flex;flex-direction:column;gap:3px;animation:unlock-in .35s ease-out}.unlock-toast strong{font-size:15px}.unlock-toast span{font-size:14px;font-weight:700}@keyframes unlock-in{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:translateX(0)}}
