@font-face{font-family:EndingMincho;src:url('./assets/fonts/ending-mincho.ttf') format('truetype');font-weight:400;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:#e7e5dc;font-family:"Yu Gothic UI","Yu Gothic",sans-serif;user-select:none}
button,input,summary{font:inherit}button,summary{cursor:pointer}button{color:inherit;border:0;background:none;letter-spacing:.06em}
button:focus-visible,summary:focus-visible,input:focus-visible{outline:1px solid #e7e5dc;outline-offset:7px}button:hover,summary:hover{color:#fff}button:active{opacity:.65}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}
#game,#view{position:absolute;inset:0;width:100%;height:100%}#view{display:block;outline:none}
#dot{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#ff3030;box-shadow:0 0 0 1px rgba(75,0,0,.8);pointer-events:none;opacity:0}body.playing #dot{opacity:1}
#dot.switchTarget{width:11px;height:11px;margin:-5.5px;background:transparent;border:1px solid #f8e4bc;box-shadow:none}
#menu{position:absolute;inset:0;background:rgba(8,10,11,.80);display:flex;align-items:center;justify-content:center}
#menuBody{width:300px;padding:28px 0}.menuButton{display:block;font-size:23px;line-height:1.6;padding:9px 0;margin:9px auto}
details{margin-top:38px;font-size:16px;color:#c9cbc2}summary{text-align:center;list-style:none;line-height:1.7;padding:4px 0}summary::-webkit-details-marker{display:none}
label{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px}input[type=range]{accent-color:#bdc8b4;width:145px;height:18px}
#language{display:block;margin:24px auto 0;padding:0;font-size:16px}
#aliveCounter{position:absolute;left:28px;top:24px;padding:7px 11px;background:rgba(20,23,21,.65);font-size:16px;line-height:1.5;pointer-events:none;font-variant-numeric:tabular-nums;transform-origin:left top}
#aliveCount{margin-left:7px}#aliveUnit{margin-left:3px}
#killFlash{position:absolute;inset:0;background:#ffead0;opacity:0;pointer-events:none;mix-blend-mode:screen}
#killRing{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;border:3px solid #fff5de;border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 24px #ffba6455}
#impactMark{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;pointer-events:none;opacity:0;transform:rotate(45deg)}
#impactMark i{position:absolute;background:#fff5d7;width:17px;height:3px;box-shadow:0 0 8px #ffbd76}
#impactMark i:nth-child(1){left:-12px;top:20px}#impactMark i:nth-child(2){right:-12px;top:20px}#impactMark i:nth-child(3){left:20px;top:-12px;width:3px;height:17px}#impactMark i:nth-child(4){left:20px;bottom:-12px;width:3px;height:17px}
#ending{position:absolute;inset:0;background:rgba(6,9,12,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:endIn 1.1s ease both}
#endingLine{font-family:EndingMincho,"Yu Mincho",serif;font-size:clamp(24px,2.55vw,40px);font-weight:400;letter-spacing:.10em;line-height:1.9;margin:0 24px 30px;text-align:center;color:#eee9df}
#resultTime{margin:0 0 46px;text-align:center;color:#a9aaa7;font-variant-numeric:tabular-nums}#resultTimeLabel{font-size:12px;letter-spacing:.14em;margin-right:16px}#resultTimeValue{font-size:19px;letter-spacing:.07em}
#retry,#finish{font-family:EndingMincho,"Yu Mincho",serif;font-size:19px;letter-spacing:.15em;border-bottom:1px solid #b4b0a859;padding:10px 5px}
#intro{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:10}
#brandLogo{height:180px;max-height:27vh;max-width:70vw;object-fit:contain;opacity:0;animation:logoIn .25s ease forwards}
#closed{position:absolute;inset:0;background:#06080b;z-index:20;animation:endIn .65s ease both}
#error{position:absolute;inset:25% 10%;height:max-content;padding:28px;background:#e8e6df;color:#292b28;user-select:text;z-index:30}
@keyframes logoIn{to{opacity:1}}@keyframes endIn{from{opacity:0}to{opacity:1}}
details:not([open])>:not(summary){display:none}
body:not(.playing),body:not(.playing) #view{cursor:default}
body.playing #view{cursor:none}
body.confirming #menuBody{visibility:hidden}
#restartDialog{padding:40px 24px;border:0;background:transparent;color:#e7e5dc;text-align:center;width:min(470px,90vw);max-width:90vw}
#restartDialog::backdrop{background:rgba(8,10,11,.20);cursor:default}
#restartQuestion{font-size:22px;font-weight:400;line-height:1.7;margin:0 0 34px;letter-spacing:.04em}
#restartChoices{display:flex;justify-content:center;gap:68px}
#restartChoices button{font-size:20px;padding:10px 12px}
#transitionWhite{position:absolute;inset:0;background:#fff;opacity:0;z-index:12;cursor:default}
