html,body{margin:0;height:100%;background:#1e4d2b;overflow:hidden;touch-action:none;font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif;font-weight:800;user-select:none;-webkit-user-select:none}
canvas{position:fixed;inset:0;display:block;touch-action:none}
#hud{position:fixed;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;display:flex;gap:8px;align-items:center;color:#fad539;font-size:18px;pointer-events:none;z-index:2}
#hud>*{background:rgba(41,13,3,.72);padding:6px 12px;border-radius:14px;border:2px solid #f8b313}
#score{margin-left:auto}
#hud>button{background:linear-gradient(#f9c41f,#da901f);color:#290d03;border:3px solid #290d03}
button{pointer-events:auto;font:inherit;border:3px solid #290d03;border-radius:16px;background:linear-gradient(#f9c41f,#da901f);color:#290d03;padding:8px 16px;cursor:pointer;box-shadow:0 4px 0 #472809}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #472809}
button.green{background:linear-gradient(#7cb342,#2e7d32);color:#fff}button.big{font-size:26px;padding:12px 36px}
#hint{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));width:100%;text-align:center;color:#fff8e0;text-shadow:0 2px 3px #000;pointer-events:none;z-index:2}
#title,#sanct{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 40%,rgba(124,179,66,.55),rgba(30,77,43,.95));text-align:center;color:#fff8e0;padding:10px}
#logo{max-height:52vh;max-width:86vw;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
#lvlPick,#levels{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}#lvlPick button,#levels button{font-size:15px;padding:6px 12px;background:linear-gradient(#7cb342,#2e7d32);color:#fff}
.small{font-size:14px;opacity:.9;margin:0}
#panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;background:#fff3c4;border:6px solid #472809;border-radius:24px;padding:16px 26px;text-align:center;color:#290d03;min-width:260px;max-width:92vw}
#panel h1{margin:0 0 6px}#stars{font-size:48px;color:#f8b313;letter-spacing:6px;text-shadow:0 2px 0 #af5d12}#stars .off{color:#ccc;text-shadow:none}
.btns{display:flex;gap:10px;justify-content:center;margin:8px 0}
#sanct h1{margin:0;color:#fad539;text-shadow:0 3px 0 #290d03}
#sgrid{display:grid;grid-template-columns:repeat(3,minmax(90px,150px));gap:10px}
.pen{background:rgba(255,243,196,.95);color:#290d03;border-radius:18px;border:4px solid #4c9a2a;padding:8px;display:flex;flex-direction:column;align-items:center}
.pen .em{font-size:44px}.pen small{color:#2e7d32}.pen.locked{opacity:.55;border-color:#777}
.hidden{display:none!important}


/* polish */
#hud>*{box-shadow:0 3px 0 rgba(0,0,0,.35);text-shadow:0 2px 0 #290d03}
#score.bump{animation:bump .35s ease-out}@keyframes bump{40%{transform:scale(1.25)}}
button{transition:filter .15s}button:hover{filter:brightness(1.08)}
button{background:linear-gradient(#ffe066,#f8b313 45%,#da901f);border:3px solid #472809;box-shadow:0 5px 0 #472809,inset 0 2px 0 rgba(255,255,255,.6);text-shadow:0 1px 0 rgba(255,255,255,.5)}
button.green{background:linear-gradient(#9ccc65,#4c9a2a 50%,#2e7d32);text-shadow:0 1px 0 rgba(0,0,0,.4)}
#panel{background:linear-gradient(#fff6d6,#fde3a3);border:7px solid #472809;box-shadow:0 0 0 4px #f8b313,0 14px 30px rgba(0,0,0,.5);animation:panelIn .45s cubic-bezier(.2,1.6,.4,1)}
#panel h1{display:inline-block;background:linear-gradient(#e8622c,#a7210f);color:#fff;padding:6px 26px;border-radius:12px;margin-top:-34px;box-shadow:0 4px 0 #472809;text-shadow:0 2px 0 #290d03;border:3px solid #472809}
@keyframes panelIn{from{transform:translate(-50%,-50%) scale(.4);opacity:0}}
#stars span{display:inline-block}#stars span.on{animation:starPop .5s cubic-bezier(.2,1.8,.4,1) both}
@keyframes starPop{0%{transform:scale(0) rotate(-120deg);opacity:0}100%{transform:scale(1) rotate(0)}}
#title #logo{animation:logoBob 3s ease-in-out infinite}@keyframes logoBob{50%{transform:translateY(-8px) rotate(-1deg)}}
#title,#sanct{background:radial-gradient(circle at 50% 40%,rgba(124,179,66,.45),rgba(20,55,30,.92))}
.pen{animation:panelIn2 .4s both}@keyframes panelIn2{from{transform:scale(.6);opacity:0}}
#rotate{display:none;position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 35%,#4c9a2a,#1e4d2b);color:#fff8e0;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
#rotate img{width:38vw;max-width:200px;animation:logoBob 2s ease-in-out infinite}
#rotate .phone{font-size:56px;animation:turn 2s ease-in-out infinite}@keyframes turn{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
#rotate h2{color:#fad539;text-shadow:0 3px 0 #290d03;margin:.3em 0}
@media (orientation:portrait){#rotate{display:flex}#hud,#hint,#title,#panel,#sanct,canvas{visibility:hidden}}