*{margin:0;padding:0;box-sizing:border-box}
body{background-color:#16210f;background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0px, rgba(0,0,0,.12) 1px, transparent 1px, transparent 3px);display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Verdana,Tahoma,Arial,sans-serif;color:#e9dfb8;overflow:hidden}
#game-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(65vw,65vh);max-width:400px}
#header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 4px}
#header h1{font-size:1.6rem;font-weight:700;color:#f2c230;letter-spacing:2px;text-transform:uppercase;text-shadow:1px 1px 0 #000}
#score-box{background:#2a3a1a;border:2px solid #5c3d1e;border-radius:3px;padding:6px 18px;font-size:1rem;font-weight:600}
#score-box span{color:#9bd14a}
#canvas-container{position:relative;width:100%;aspect-ratio:1;overflow:hidden;box-shadow:0 0 0 4px #3f2610, 0 0 0 5px #8a5a2e;border:2px solid #16210f}
canvas{display:block;width:100%;height:100%;background:#0e1608}
#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(22,33,15,.92);opacity:0;pointer-events:none;transition:opacity .3s}
#overlay.visible{opacity:1;pointer-events:all}
#overlay h2{font-size:2rem;margin-bottom:8px;color:#e2814a}
#overlay p{font-size:1.1rem;margin-bottom:20px;color:#c8cf9c}
#overlay .final-score{font-size:1.4rem;color:#9bd14a;margin-bottom:24px}
button{background-color:#f2c230;background-image:linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.12));color:#241a08;border:2px solid #3f2610;padding:12px 36px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s;letter-spacing:.5px}
button:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(242,194,48,.35)}
button:active{transform:scale(.97)}
#mobile-controls{display:none;width:100%;max-width:260px;margin-top:4px}
.ctrl-row{display:flex;justify-content:center;gap:10px;margin-bottom:10px}
.ctrl-btn{width:72px;height:56px;border-radius:4px;background:#2a3a1a;border:2px solid #5c3d1e;color:#e9dfb8;font-size:1.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background .1s}
.ctrl-btn:active{background:#3a461f}
#hint{font-size:.82rem;color:#8a9a6b;margin-top:6px}
@media(hover:none)and (pointer:coarse){#mobile-controls{display:block}#hint{display:none}}