:root{--primary-color:#28465c;--accent-color:#1c94e9}@font-face{font-family:Noto Sans;src:url(../NotoSans-VariableFont_wdth_wght.ttf);font-weight:1 1000;font-display:swap}@font-face{font-family:EB Garamond;src:url(../EBGaramond-VariableFont_wght.ttf);font-weight:1 1000;font-display:swap}body{color:#fff;touch-action:none;background-color:#000;margin:0;padding:0;font-family:Noto Sans,sans-serif;font-size:max(14px,min(2.7vw,16px));overflow:hidden}#page-title{text-align:center;background-color:var(--primary-color);color:#fff;width:100vw;margin:0;padding:max(1rem,min(2.2vh,1.5rem)) 0;font-family:Noto Sans,sans-serif;font-size:max(1.5rem,min(4.8vw,2rem))}#game-container{height:calc(100vh - clamp(4rem, 10vh, 6rem) - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0));background-color:#000;justify-content:center;font-family:Noto Sans,sans-serif;display:flex}canvas{background:#000;width:100vw;height:100%;margin:0 auto;font-family:Noto Sans,sans-serif;display:block}footer{color:#fff;background-color:var(--primary-color);text-align:center;width:100vw;bottom:env(safe-area-inset-bottom,0);padding:clamp(.5rem, 1vh, 1rem) env(safe-area-inset-left,0) clamp(.5rem, 1vh, 1rem) env(safe-area-inset-right,0);z-index:1002;font-family:EB Garamond;font-size:max(.8rem,min(2.7vw,1rem));display:none;position:fixed}#controls{top:calc(clamp(6rem, 15vh, 8rem) + env(safe-area-inset-top,0));left:calc(clamp(.5rem, 2vw, 1rem) + env(safe-area-inset-left,0));border:1px solid var(--accent-color);z-index:1001;background:rgba(0,0,0,.7);border-radius:max(.4rem,min(1vw,.5rem));max-width:max(10rem,min(24.8vw,15rem));padding:max(.5rem,min(2vw,1rem));font-family:EB Garamond;position:fixed}#controls h3{color:var(--accent-color);margin-top:0;font-family:EB Garamond;font-size:max(.9rem,min(2.7vw,1.2rem))}p{margin:max(.2rem,min(.5vh,.3rem)) 0;font-family:EB Garamond;font-size:max(.7rem,min(2vw,.9rem))}#touch-controls{bottom:calc(2rem + env(safe-area-inset-bottom,0));z-index:1003;background:rgba(0,0,0,.7);border-radius:max(.4rem,min(1vw,.5rem));gap:max(.5rem,min(2vw,1rem));padding:max(.5rem,min(1vh,.75rem));display:flex;position:fixed;left:50%;transform:translate(-50%)}#touch-controls button{background:var(--accent-color);color:#fff;border:none;border-radius:50%;flex:none;width:max(3rem,min(8vw,4rem));height:max(3rem,min(8vw,4rem));font-size:max(1rem,min(3vw,1.3rem));transition:transform .2s}#touch-controls button:hover{transform:scale(1.1)}.modal{z-index:1000;background:rgba(0,0,0,.9);justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--primary-color);border:2px solid var(--accent-color);text-align:left;border-radius:max(.5rem,min(1.4vw,.75rem));max-width:max(15rem,min(80vw,25rem));padding:max(1rem,min(2.7vw,1.5rem))}.modal-content h2{color:var(--accent-color);margin-top:0;font-family:EB Garamond;font-size:max(1.2rem,min(4vw,1.5rem))}#startButton,#restartButton{background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:max(.3rem,min(1vw,.4rem));width:100%;margin-top:max(.8rem,min(2.2vh,1rem));padding:max(.6rem,min(2.2vh,.8rem)) max(1rem,min(2.7vw,1.5rem));font-size:max(.9rem,min(2.7vw,1.2rem))}#startButton:hover,#restartButton:hover{opacity:.8}.modal-content ul{padding-left:max(.8rem,min(2vw,1rem))}.modal-content li{margin:max(.3rem,min(1vh,.5rem)) 0;font-family:EB Garamond;font-size:max(.8rem,min(2.7vw,1rem))}input{font-family:EB Garamond}button{font-family:EB Garamond;font-weight:700}header{width:100vw;margin:0 auto;position:relative}.notice{text-align:center;background-color:var(--primary-color);color:#fff;margin:auto;padding:max(.3rem,min(1vh,.5rem)) 0;font-family:EB Garamond;font-size:max(.7rem,min(2vw,.9rem))}a{color:var(--accent-color)}@media (max-width:768px){#page-title{padding:max(.5rem,min(1.5vh,.8rem)) 0;font-size:max(1rem,min(4vw,1.5rem))}#controls{max-width:max(8rem,min(20vw,12rem));top:calc(clamp(4rem, 12.2vh, 6rem) + env(safe-area-inset-top,0));left:calc(clamp(.3rem, 1vw, .5rem) + env(safe-area-inset-left,0));padding:max(.4rem,min(1.4vw,.6rem));font-size:max(.6rem,min(1.8vw,.8rem))}#touch-controls{bottom:calc(clamp(1.5rem, 4vh, 2.7rem) + env(safe-area-inset-bottom,0));padding:clamp(.4rem, 1vh, .6rem) env(safe-area-inset-left,0) clamp(.4rem, 1vh, .6rem) env(safe-area-inset-right,0);display:flex}#touch-controls button{min-width:max(2rem,min(8vw,2.7rem));min-height:max(2rem,min(8vw,2.7rem));padding:max(.5rem,min(1.5vh,.7rem)) 0;font-size:max(.8rem,min(2.7vw,1rem))}footer{padding:clamp(.3rem, .8vh, .5rem) env(safe-area-inset-left,0) clamp(.3rem, .8vh, .5rem) env(safe-area-inset-right,0);font-size:max(.7rem,min(2vw,.9rem))}.modal-content{max-width:max(12rem,min(84.8vw,20rem));padding:max(.6rem,min(2vw,1rem))}.modal-content h2{font-size:max(1rem,min(3.8vw,1.2rem))}.modal-content button{padding:max(.5rem,min(1.5vh,.7rem)) max(.8rem,min(2vw,1rem));font-size:max(.8rem,min(2.7vw,1rem))}.modal-content li{font-size:max(.7rem,min(2vw,.9rem))}.notice{padding:max(.2rem,min(.8vh,.4rem)) 0;font-size:max(.6rem,min(1.8vw,.8rem))}}@media (max-width:480px){#page-title{padding:max(.3rem,min(1vh,.5rem)) 0;font-size:max(.8rem,min(3.8vw,1.2rem))}#controls{max-width:max(6rem,min(18vw,10rem));top:calc(clamp(3rem, 10vh, 5rem) + env(safe-area-inset-top,0));left:calc(clamp(.2rem, .8vw, .4rem) + env(safe-area-inset-left,0));padding:max(.3rem,min(1vw,.5rem));font-size:max(.5rem,min(1.4vw,.7rem))}#touch-controls{bottom:calc(clamp(1rem, 3vh, 2rem) + env(safe-area-inset-bottom,0));padding:clamp(.3rem, .8vh, .5rem) env(safe-area-inset-left,0) clamp(.3rem, .8vh, .5rem) env(safe-area-inset-right,0);display:flex}#touch-controls button{min-width:max(1.8rem,min(7vw,2.2rem));min-height:max(1.8rem,min(7vw,2.2rem));padding:max(.4rem,min(1vh,.6rem)) 0;font-size:max(.7rem,min(2vw,.9rem))}footer{padding:clamp(.2rem, .6vh, .4rem) env(safe-area-inset-left,0) clamp(.2rem, .6vh, .4rem) env(safe-area-inset-right,0);font-size:max(.6rem,min(1.8vw,.8rem))}.modal-content{max-width:max(10rem,min(90vw,18rem));padding:max(.5rem,min(1.4vw,.8rem))}.modal-content h2{font-size:max(.8rem,min(2.7vw,1rem))}.modal-content button{padding:max(.4rem,min(1vh,.6rem)) max(.6rem,min(1.4vw,.8rem));font-size:max(.7rem,min(2vw,.9rem))}.modal-content li{font-size:max(.6rem,min(1.8vw,.8rem))}.notice{padding:max(.1rem,min(.6vh,.3rem)) 0;font-size:max(.5rem,min(1.4vw,.7rem))}}button{cursor:pointer;transition:all .5s ease-in-out}button:hover{transform:scale(1.05)}#controls-toggle{bottom:calc(6rem + env(safe-area-inset-bottom,0));z-index:1004;opacity:.1;transition:all .5s ease-in-out;position:fixed;left:50%;transform:translate(-50%)}#controls-toggle:hover{opacity:.8}#controls-toggle button{background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:.4rem;padding:.5rem 1rem;font-size:max(.8rem,min(2.5vw,1rem));transition:opacity .3s}@media (hover:none){#controls-toggle{opacity:.8}}