:root{--content-max-width: 600px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Merriweather,serif;line-height:1.6;color:#333;background-color:#f5f5f5;margin:0;padding:0;min-height:100vh}#app{display:block;min-height:100vh;padding:10px}header{text-align:center;margin-bottom:1rem;padding:10px}header h1{font-family:Fredoka One,cursive;font-size:2rem;font-weight:400;color:#2c3e50;margin-bottom:.5rem}.subtitle{font-size:.9rem;color:#7f8c8d;font-style:italic;margin-bottom:1rem}.instruction{font-size:1.1rem;color:#34495e;font-weight:400;max-width:var(--content-max-width);margin:0 auto}.status-bar{display:block;position:relative;padding:.75rem 1rem;background-color:#faf7f2;border:1px solid #d4c4a8;border-radius:8px 8px 0 0;margin:0 auto;width:fit-content;min-width:200px;text-align:center;min-height:calc(1.2em + 1.5rem)}#counter-display{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-weight:700;color:#5d4e37}#level-display{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-weight:400;color:#5d4e37;font-size:.9rem}#game-container{display:block;background-color:#fff;border-radius:0 0 8px 8px;border:1px solid #d4c4a8;border-top:none;box-shadow:0 2px 10px #0000001a;margin:0 auto;width:fit-content;min-width:200px;padding:10px;text-align:center}#game-canvas{cursor:pointer;touch-action:pan-x pan-y;border-radius:4px;display:block}footer{text-align:center;margin-top:1rem;padding:1rem}footer p{font-size:.9rem;color:#7f8c8d}footer a{color:#8b7355;text-decoration:none;font-weight:700;transition:color .2s ease}footer a:hover{color:#5d4e37;text-decoration:underline}.levels-explanation{margin-top:.75rem;font-weight:400!important;color:#7f8c8d;max-width:var(--content-max-width);margin-left:auto;margin-right:auto;line-height:1.5}@media (max-width: 480px){#app{padding:5px}header{margin-bottom:.5rem;padding:5px}header h1{font-size:1.5rem;margin-bottom:.25rem}.subtitle{margin-bottom:.5rem}.instruction{font-size:1rem}#game-container{padding:5px}footer{margin-top:.5rem;padding:.5rem}}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffb3;display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:none}.modal-content{background:transparent;padding:24px;text-align:center;pointer-events:none}.modal-title{font-family:Merriweather,serif;margin:0 0 12px;font-size:24px;font-weight:700;color:#2d5016;text-shadow:0 1px 2px rgba(45,80,22,.1)}.modal-message{font-family:Merriweather,serif;margin:0 0 20px;font-size:16px;color:#4a4a4a;line-height:1.4;font-weight:400}.modal-button{font-family:Merriweather,serif;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease;pointer-events:auto;display:block;margin:0 auto}.modal-button+.modal-button{margin-top:16px}.modal-button-primary{background:#8b7355;color:#fff;border:none;opacity:.9}.modal-button-secondary{background:transparent;color:#8b7355;border:2px solid #8B7355;opacity:.7}.modal-button:hover{transform:translateY(-1px)}.modal-button-primary:hover{opacity:1}.modal-button-secondary:hover{opacity:.5}