@import"https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--beige: #E2D1B5;--dark-green: #0A340A;--muted-sage: #B0AD8D;--light-beige: #E8D5B9}html{width:100%;height:100dvh;background:var(--light-beige);font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--dark-green);image-rendering:pixelated;overflow:hidden}body{width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;padding-inline:20px 28px;padding-block:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-bottom,0px));overflow:hidden}main{height:100dvh}#app{width:100%;height:100%;max-width:730px;position:relative}.screen{display:none;height:100%;flex-direction:column;align-items:center}.screen.active{display:flex}#screen-start{width:100%;min-height:200px;justify-content:center}#start-canvas-wrap{position:relative;width:100%;min-height:190px;display:flex;align-items:center;justify-content:center;cursor:pointer}#start-label{position:relative;display:inline-block;min-height:30px;padding:6px 12px;background:var(--dark-green);width:fit-content;white-space:nowrap;line-height:1;font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--beige);-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}#start-label-text{display:inline-flex;align-items:center;justify-content:center;color:var(--beige)}#start-tail,#start-head{position:absolute;pointer-events:none;image-rendering:pixelated}#start-tail{left:-41px;top:0}#start-head{right:-35px;bottom:0}#screen-game{width:100%;max-width:730px;justify-content:center}#board-wrapper{position:relative;width:100%;max-width:698px;margin:0 auto;display:flex;align-items:center;justify-content:center}#canvas-deco-wrap{display:inline-block;max-width:100%;padding-top:8px;padding-left:8px;background:repeating-linear-gradient(to right,#B0AD8D 0 6px,transparent 6px 12px) top / 100% 2px no-repeat,repeating-linear-gradient(to bottom,#B0AD8D 0 6px,transparent 6px 12px) left / 2px 100% no-repeat}#canvas-game{display:block;box-sizing:content-box;width:680px;max-width:100%;height:auto;border:2px solid var(--dark-green);border-right-width:8px;border-bottom-width:8px;image-rendering:pixelated;position:relative;z-index:1;touch-action:none}#status-bar{width:100%;margin-top:18px}#status-content{width:100%;max-width:698px;margin:0 auto;display:flex;align-items:center;justify-content:flex-start;gap:40px}#status-left{display:flex;flex-direction:column;gap:6px;flex:1}#score-row{display:flex;align-items:center;gap:12px;white-space:nowrap;height:32px}#speed-row{display:flex;align-items:center;gap:10px;white-space:nowrap}.status-item{display:inline-flex;align-items:center;padding:5px}.status-item-score-value{padding:0}.life-group{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-left:24px}.status-item-life{margin-left:0}.label{font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--dark-green);letter-spacing:1px}.life-label{margin-left:0}#score-display{font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--dark-green);letter-spacing:2px;min-width:52px;display:inline-flex;gap:0}#score-display .score-digit.inactive{color:var(--muted-sage)}#score-display .score-digit.active{color:var(--dark-green)}#life-display{display:flex;align-items:center}.life-hearts{display:flex;align-items:center;gap:12px;padding-block:8px}.heart{display:inline-flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;line-height:0;font-size:0;color:var(--dark-green)}.heart svg{display:block}.heart.empty svg path{fill:#b0ad8d}#speed-row{display:flex;align-items:center;gap:12px;white-space:nowrap}#speed-slider-shell{flex:1;border:2px solid var(--dark-green);border-right-width:8px;border-bottom-width:8px;background:var(--light-beige)}#speed-slider{width:100%;height:22px;border:none;background:var(--light-beige);position:relative;cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:none}#speed-bar-fill{position:absolute;left:0;top:0;height:100%;background:var(--muted-sage);width:30%;transition:width .08s}#speed-bar-fill:after{content:"";position:absolute;right:-4px;top:3px;height:16px;width:2px;background:var(--dark-green)}#speed-pct{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-family:Pixelify Sans,monospace;font-weight:500;font-size:14px;color:var(--dark-green);z-index:1;pointer-events:none;line-height:1}#speed-slider:focus,#speed-slider:active{outline:none}#dpad{display:flex;flex-direction:column;align-items:center;flex-shrink:0}#dpad-buttons{display:flex;flex-direction:row;gap:8px;align-items:center}.dpad-btn{width:70px;height:70px;background:var(--light-beige);border:3px solid var(--dark-green);border-right-width:10px;border-bottom-width:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;image-rendering:pixelated;transition:background .06s;outline:none;box-shadow:inset -2px -2px 0 0 var(--muted-sage)}.dpad-btn .dpad-icon-container{width:100%;height:100%;display:flex;border:2px solid #E8D5B9}.dpad-btn .dpad-icon-wrap{width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:center;background:#b0ad8d;border:2px solid #0A340A}.dpad-btn:active,.dpad-btn.pressed{background:var(--muted-sage);box-shadow:inset 2px 2px 0 0 var(--muted-sage);border-right-width:8px;border-bottom-width:8px;translate:2px 2px}.dpad-icon{display:block;transform-origin:center}#btn-left .dpad-icon{transform:rotate(0)}#btn-up .dpad-icon{transform:rotate(90deg)}#btn-down .dpad-icon{transform:rotate(-90deg)}#btn-right .dpad-icon{transform:rotate(180deg)}#screen-gameover{width:100%;min-height:200px;justify-content:center;gap:24px;--gameover-panel-width: 289px}#gameover-box{display:flex;flex-direction:column;align-items:stretch;width:var(--gameover-panel-width)}#gameover-header-group{display:flex;flex-direction:column}#gameover-title{border:none;font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--dark-green);letter-spacing:2px;text-align:center;padding:6px 8px;position:relative}#gameover-score-label{border:none;font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--dark-green);letter-spacing:1px;text-align:center;padding:6px 8px;position:relative;display:flex;align-items:center;justify-content:center}#gameover-title:before,#gameover-score-label:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to right,var(--dark-green) 0 6px,transparent 6px 12px) top / 100% 2px no-repeat,repeating-linear-gradient(to right,var(--dark-green) 0 6px,transparent 6px 12px) bottom / 100% 2px no-repeat,repeating-linear-gradient(to bottom,var(--dark-green) 0 6px,transparent 6px 12px) left / 2px 100% no-repeat,repeating-linear-gradient(to bottom,var(--dark-green) 0 6px,transparent 6px 12px) right / 2px 100% no-repeat}#gameover-score-row{display:flex;align-items:stretch;width:100%;margin-top:-2px}#gameover-score-value{font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--light-beige);background:var(--dark-green);padding:8px 10px;min-height:34px;text-align:center;letter-spacing:2px;min-width:80px;margin-left:-2px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}#gameover-score-row #gameover-score-label{flex:1}#gameover-restart{font-family:Pixelify Sans,monospace;font-weight:500;font-size:18px;color:var(--light-beige);background:var(--dark-green);padding:8px 20px;letter-spacing:1px;cursor:pointer;text-align:center;width:var(--gameover-panel-width)}@media(max-width:740px){main{min-height:100dvh}body{overflow-x:hidden;overflow-y:auto;align-items:flex-start;padding-inline:20px 28px;padding-block:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px))}#canvas-deco-wrap{padding-top:4px;padding-left:4px}#status-bar{margin-top:12px}#status-content{flex-direction:column;gap:12px;align-items:stretch;padding:0 4px}#status-left{width:100%}#score-row{flex-wrap:wrap;height:auto;gap:8px}.life-group{margin-left:auto}#speed-row{gap:8px}#dpad{width:100%;align-items:center;margin-top:4px}#dpad-buttons{gap:10px;justify-content:center}.dpad-btn{width:60px;height:60px}#screen-gameover{padding:40px 16px}#gameover-box,#gameover-restart{max-width:100%}}@media(max-width:420px){#score-row{gap:6px}.life-group{margin-left:8px;gap:8px}.life-hearts{gap:8px}.dpad-btn{width:54px;height:54px;border-right-width:6px;border-bottom-width:6px}.dpad-icon{width:18px;height:22px}#start-label,#start-label-text{font-size:14px}}