*{box-sizing:border-box;margin:0;padding:0}html,body{color:#e8d8c8;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#0a0503;width:100%;height:100%;font-family:monospace;overflow:hidden}body{justify-content:center;align-items:center;display:flex}#app{flex-direction:column;align-items:center;display:flex;position:relative}.veins{pointer-events:none;opacity:.5;z-index:0;background:radial-gradient(circle at 18% 12%,#781e1259 0%,#0000 35%),radial-gradient(circle at 82% 20%,#6e190f4d 0%,#0000 30%),radial-gradient(circle at 75% 80%,#5a140c52 0%,#0000 35%),radial-gradient(circle at 15% 75%,#64180e47 0%,#0000 32%),radial-gradient(circle,#46120a38 0%,#0000 45%);animation:7s ease-in-out infinite veins-breathe;position:absolute;inset:0}@keyframes veins-breathe{0%,to{opacity:.35}50%{opacity:.7}}#menuScreen,#levelSelectScreen,#levelCompleteScreen,#endScreen{flex-direction:column;justify-content:center;align-items:center;gap:24px;width:100%;height:100%;display:none;position:absolute;top:0;left:0;overflow:hidden}#menuScreen{z-index:10;background:radial-gradient(#241207 0%,#0a0503 100%);gap:18px;display:flex}#levelSelectScreen{z-index:10;background:radial-gradient(#1f1208 0%,#0a0503 100%);gap:20px}#levelCompleteScreen{z-index:20;background:radial-gradient(#14230f 0%,#0a0503 100%);gap:20px}#endScreen{z-index:20;gap:20px}h1{z-index:1;text-align:center;letter-spacing:3px;font-size:30px;position:relative}#title{color:#9fe89a;text-shadow:0 0 18px #7fe08aa6,0 0 45px #7fe08a4d,2px 3px #28502880;font-size:34px;animation:3.5s ease-in-out infinite title-pulse}@keyframes title-pulse{0%,to{text-shadow:0 0 18px #7fe08aa6,0 0 45px #7fe08a4d,2px 3px #28502880}50%{text-shadow:0 0 26px #7fe08ae6,0 0 60px #7fe08a73,2px 3px #28502880}}#subtitle{z-index:1;color:#b34038;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 12px #ff504866;font-size:12px;position:relative}#endMessage{z-index:1;text-shadow:0 0 30px;font-size:40px;position:relative}.sub-msg{z-index:1;color:#9aa08a;letter-spacing:2px;opacity:.8;font-size:12px;position:relative}#levelCompleteScreen h1{color:#8fe88a;text-shadow:0 0 30px #8fe88a80,0 0 70px #8fe88a40;font-size:26px}#gameUI{z-index:5;flex-direction:column;width:100%;height:100%;display:none;position:absolute;top:0;left:0}#topBar{z-index:6;background:linear-gradient(#1d0f07 0%,#120705 100%);border-bottom:1px solid #3a1508;justify-content:space-between;align-items:center;height:38px;padding:6px 12px;display:flex;box-shadow:0 2px 10px #0009}#topBar button{letter-spacing:1px;padding:4px 10px;font-size:12px}#pauseBtn,#muteBtn{text-align:center;min-width:32px;padding:4px 6px}#muteBtn.muted{color:#6a5a4a;border-color:#6a5a4a}#levelName{color:#9fe89a;text-shadow:0 0 8px #7fe08a66;white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}#cellCount{color:#ff8a82;text-shadow:0 0 8px #ff504866;white-space:nowrap;font-size:13px}#levelStars{z-index:1;letter-spacing:10px;text-align:center;color:#ffb040;text-shadow:0 0 20px #ffb04099;font-size:34px;position:relative}#levelStars .off{color:#4a3a28;text-shadow:none}#tutorialHint{color:#9fe89a;text-align:center;text-shadow:0 0 10px #7fe08a80;pointer-events:none;white-space:nowrap;z-index:7;background:#120905d9;border:1px solid #7fe08a40;border-radius:10px;padding:8px 16px;font-family:monospace;font-size:13px;transition:opacity .5s;display:none;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}#gameCanvas{cursor:crosshair;max-width:100%;max-height:calc(100vh - 38px);display:block}#levelList{z-index:1;scrollbar-width:thin;scrollbar-color:#3a1508 transparent;flex-direction:column;gap:8px;width:100%;max-width:320px;max-height:68vh;padding:8px 20px 20px;display:flex;position:relative;overflow-y:auto}#levelList::-webkit-scrollbar{width:4px}#levelList::-webkit-scrollbar-thumb{background:#3a1508;border-radius:2px}#levelList::-webkit-scrollbar-track{background:0 0}.level-btn{color:#7a6a5a;cursor:pointer;text-transform:none;letter-spacing:0;background:linear-gradient(#2d120ab3 0%,#180a06b3 100%);border:1px solid #3a2012;border-radius:8px;align-items:center;gap:12px;padding:11px 16px;font-size:15px;transition:all .2s;display:flex;box-shadow:inset 0 0 #ff504800,0 2px 6px #0006}.level-name{text-align:left;flex:1}.level-stars{color:#ffb040;letter-spacing:1px;font-size:11px}.level-stars .star-off{color:#4a3a28}.level-btn:hover,.level-btn:active{color:#ff8a82;background:linear-gradient(#5a190fbf 0%,#320e08bf 100%);border-color:#ff5048;box-shadow:0 0 14px #ff504840,inset 0 0 8px #ff50481a}.level-btn.completed{color:#8fe88a;background:linear-gradient(#1e321999 0%,#101c0e99 100%);border-color:#7fe08a73}.level-btn.completed:hover,.level-btn.completed:active{color:#b5f2ba;background:linear-gradient(#28461eb3 0%,#162612b3 100%);border-color:#7fe08a;box-shadow:0 0 15px #7fe08a33}.level-num{color:#8a5a48;text-align:right;min-width:24px;font-size:13px}.level-btn.completed .level-num{color:#7fe08a}#menuBackBtn{z-index:1;margin-top:6px;position:relative}button{z-index:1;color:#ff8a82;cursor:pointer;text-transform:uppercase;letter-spacing:2px;-webkit-tap-highlight-color:transparent;text-shadow:0 0 8px #ff504866;background:linear-gradient(#3c140c8c 0%,#1e0c088c 100%);border:1px solid #8a2c20;border-radius:10px;padding:12px 32px;font-family:monospace;font-size:17px;transition:all .25s;position:relative;box-shadow:inset 0 1px #ffffff0f,0 3px 10px #00000080}button:hover,button:active{color:#ffd8d0;text-shadow:0 0 12px #ff5048b3;background:linear-gradient(#7a2018 0%,#3a100a 100%);border-color:#ff5048;box-shadow:0 0 22px #ff504866,inset 0 0 12px #ff504826}.random-btn{color:#ff5048;background:linear-gradient(#46140e99 0%,#280c0899 100%);border-color:#b34038;margin-top:10px}.random-btn:hover,.random-btn:active{color:#ff8a82;background:linear-gradient(#5a1810 0%,#2a0e08 100%);border-color:#ff5048;box-shadow:0 0 18px #ff504866}#endScreen{background:radial-gradient(#1a0a05 0%,#0a0302 100%)}#endScreen h1.win{color:#8fe88a;text-shadow:0 0 30px #8fe88a99,0 0 70px #8fe88a4d}#endScreen h1.lose{color:#ff5048;text-shadow:0 0 30px #ff504899,0 0 70px #ff50484d}@media (width<=420px){#menuScreen h1{font-size:26px}#title{font-size:28px}#topBar{height:34px;padding:4px 8px}#topBar span{font-size:12px}#endMessage{font-size:30px}button{padding:10px 24px;font-size:15px}}
