:root{--cell-size:32px;--bg-light:#f4f4f4;--bg-dark:#1e1e1e;--text-light:#000;--text-dark:#fff}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1vh 1vw;background:linear-gradient(135deg,var(--bg-light) 0,#e8f4fd 100%);color:var(--text-light);transition:background .3s,color .3s;height:100vh;width:100vw;margin:0;overflow:hidden;box-sizing:border-box}.title-container{align-items:center;gap:15px;margin-bottom:20px}.dark{background:linear-gradient(135deg,var(--bg-dark) 0,#0a0a0a 100%);color:var(--text-dark)}h2{margin:0;font-size:clamp(1.3rem,4vw,2.2rem);font-weight:600;text-align:center;color:#9b59b6;text-shadow:2px 2px 4px rgba(0,0,0,.1);line-height:1.2}.dark h2{color:#64b5f6}#controls{margin-bottom:5px;width:100%;max-width:450px;background:0 0;border-radius:12px;padding:4px 8px;box-shadow:none;backdrop-filter:none;border:none}.dark #controls{background:0 0;border:none}#top-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:50px}#bottom-controls{margin-top:5px;width:100%;max-width:450px;background:0 0;border-radius:12px;padding:4px 8px;box-shadow:none;backdrop-filter:none;border:none;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:50px}.dark #bottom-controls{background:0 0;border:none}#action-controls,#game-info,#grid-controls,#hint-section{display:flex;align-items:center}#action-controls,#game-info{gap:0}#hearts{font-size:18px;padding:6px 12px;background:rgba(255,182,193,.3);border-radius:16px;border:2px solid #ff6b9d;font-weight:700;text-align:center}.dark #hearts{background:rgba(255,182,193,.2);border-color:#ff8fab}.control-btn{padding:8px 14px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;background:linear-gradient(145deg,#f0f8ff,#e1f0ff);color:#2c5aa0;box-shadow:0 2px 10px rgba(0,0,0,.08)}.control-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,0,0,.12)}.control-btn.primary{background:linear-gradient(145deg,#4facfe,#00f2fe);color:#fff}.dark .control-btn{background:linear-gradient(145deg,#404040,#2a2a2a);color:#e0e0e0}.dark .control-btn.primary{background:linear-gradient(145deg,#64b5f6,#42a5f5)}.control-select{padding:6px 10px;border:2px solid #ddd;border-radius:6px;font-size:13px;background:#fff;cursor:pointer}.dark .control-select{background:#404040;border-color:#555;color:#e0e0e0}.control-label{font-weight:600;color:#2c5aa0;font-size:13px}.dark .control-label{color:#64b5f6}.toggle-group{display:flex;align-items:center;border-radius:10px}.radio-label{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .3s ease;min-width:28px}.radio-label:hover{background:rgba(44,90,160,.1)}.dark .radio-label:hover{background:rgba(100,181,246,.1)}.radio-label input[type=radio]{display:none}.radio-label input[type=radio]:checked+.mode-icon{background:rgba(44,90,160,.3);color:#2c5aa0;border-radius:50%;padding:4px 6px}.dark .radio-label input[type=radio]:checked+.mode-icon{background:rgba(100,181,246,.3);color:#64b5f6}.mode-icon{font-weight:700;font-size:16px}#hint-container{position:relative;display:inline-block}.hint-btn{background:linear-gradient(145deg,gold,#ffb347);color:#8b4513;position:relative}.hint-counter{position:absolute;top:-6px;right:-6px;background:#ff4757;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}#nonogram{display:grid;border:2px solid #000;background:#fff;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.cell{width:var(--cell-size);height:var(--cell-size);border:1px solid #ccc;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:background-color .3s ease}.cell:hover{background-color:rgba(44,90,160,.1)}.dragging{cursor:grabbing!important}.dragging .cell:hover{background-color:rgba(44,90,160,.2)}.drag-horizontal .cell:hover{background-color:rgba(44,90,160,.15)}.drag-vertical .cell:hover{background-color:rgba(44,90,160,.15)}.drag-invalid{cursor:not-allowed!important}.clue-col,.clue-corner,.clue-row{background:#ddd;font-size:11px;font-weight:700;padding:2px;display:flex;align-items:center;justify-content:center;white-space:pre-line;word-break:break-word;line-height:1.5;text-align:center;overflow:hidden;box-sizing:border-box}.clue-row{width:100%;height:var(--cell-size);justify-content:flex-end;padding-right:4px}.clue-col{width:var(--cell-size);height:100%}.clue-corner{background:#bbb;width:100%;height:100%}.clue-num{margin:0 6px}.clue-num:first-child{margin-left:0}.clue-num:last-child{margin-right:0}.dark .clue-col,.dark .clue-corner,.dark .clue-row{background:#444;color:#e0e0e0}.dark .clue-corner{background:#333}.incorrect{background-color:#ff6b6b!important;color:#fff!important;border-color:#ff4757!important}.locked{pointer-events:none;background-color:#eee}.dark .locked{background-color:#555;color:#e0e0e0}.dark .locked.incorrect{background-color:#ff6b6b!important;color:#fff!important}#gameover{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(255,71,87,.95);border-radius:15px;border:2px solid #ff4757;box-shadow:0 4px 20px rgba(255,71,87,.3);animation:gameOverSlideUp .5s ease-out;z-index:1000;max-width:90%}.gameover-content{padding:20px 30px;text-align:center;color:#fff}.gameover-content h3{margin:0 0 10px 0;font-size:24px;font-weight:700}.gameover-content p{margin:0 0 20px 0;font-size:16px;opacity:.9}.gameover-btn{font-size:16px!important;padding:12px 24px!important;background:linear-gradient(145deg,#fff,#f0f0f0)!important;color:#ff4757!important;border:2px solid #fff!important;font-weight:700!important}.gameover-btn:hover{background:linear-gradient(145deg,#f0f0f0,#e0e0e0)!important;transform:translateY(-2px)!important}@keyframes gameOverSlideUp{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}.dark #gameover{background:rgba(255,71,87,.9)}.dark .gameover-btn{background:linear-gradient(145deg,#404040,#2a2a2a)!important;color:#ff6b6b!important;border:2px solid #404040!important}.dark .gameover-btn:hover{background:linear-gradient(145deg,#505050,#3a3a3a)!important}#gamewin{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(46,204,113,.95);border-radius:15px;border:2px solid #27ae60;box-shadow:0 4px 20px rgba(46,204,113,.3);animation:gameWinSlideUp .5s ease-out;z-index:1000;max-width:90%}.gamewin-content{padding:20px 30px;text-align:center;color:#fff}.gamewin-content h3{margin:0 0 10px 0;font-size:24px;font-weight:700}.gamewin-content p{margin:0 0 20px 0;font-size:16px;opacity:.9}.gamewin-btn{font-size:16px!important;padding:12px 24px!important;background:linear-gradient(145deg,#fff,#f0f0f0)!important;color:#27ae60!important;border:2px solid #fff!important;font-weight:700!important}.gamewin-btn:hover{background:linear-gradient(145deg,#f0f0f0,#e0e0e0)!important;transform:translateY(-2px)!important}@keyframes gameWinSlideUp{from{transform:translateX(-50%) translateY(100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}.dark #gamewin{background:rgba(46,204,113,.9)}.dark .gamewin-btn{background:linear-gradient(145deg,#404040,#2a2a2a)!important;color:#2ecc71!important;border:2px solid #404040!important}.dark .gamewin-btn:hover{background:linear-gradient(145deg,#505050,#3a3a3a)!important}.hidden{display:none}#hintBtn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.hint-highlight{background-color:#9fdf9f!important;animation:fadeHighlight 1.5s ease forwards}@keyframes fadeHighlight{0%{background-color:#9fdf9f}100%{background-color:#eee}}@media (max-width:600px){:root{--cell-size:26px}body{padding:1vh 1vw;height:100vh;width:100vw;overflow:hidden}h2{font-size:clamp(1.2rem,4vw,1.8rem);margin-bottom:clamp(8px,2vh,15px)}#bottom-controls,#controls{padding:clamp(2px,1vw,8px);max-width:100%;margin:clamp(2px,1vh,5px) 0}#bottom-controls,#top-row{gap:clamp(8px,2vh,15px)}#action-controls,#game-info,#grid-controls,#hint-section{justify-content:center;flex-wrap:nowrap;gap:clamp(4px,1.5vw,8px);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}#action-controls::-webkit-scrollbar,#game-info::-webkit-scrollbar,#grid-controls::-webkit-scrollbar,#hint-section::-webkit-scrollbar{display:none}#action-controls,#game-info{gap:0}#hearts{order:1;margin:0;font-size:clamp(14px,4vw,18px);padding:clamp(4px,1.5vw,6px) clamp(8px,3vw,12px)}#grid-controls{order:2}#game-info{order:3}.control-btn{padding:clamp(6px,2vw,8px) clamp(10px,3vw,14px);font-size:clamp(10px,3vw,12px);white-space:nowrap;flex-shrink:0;min-width:clamp(50px,15vw,80px)}.radio-label{padding:clamp(2px,1vw,4px) clamp(6px,2vw,8px);min-width:clamp(24px,7vw,28px)}.clue-col,.clue-corner,.clue-row{font-size:clamp(7px,2.5vw,9px);padding:1px;line-height:1}.hint-counter{width:clamp(14px,4vw,16px);height:clamp(14px,4vw,16px);font-size:clamp(8px,2.5vw,9px);top:-5px;right:-5px}#gameover,#gamewin{bottom:clamp(5px,2vh,10px);max-width:95%;left:50%;transform:translateX(-50%)}.gameover-content,.gamewin-content{padding:clamp(10px,3vw,15px) clamp(15px,4vw,20px)}.gameover-content h3,.gamewin-content h3{font-size:clamp(16px,5vw,20px)}.gameover-content p,.gamewin-content p{font-size:clamp(12px,3.5vw,14px)}.gameover-btn{font-size:clamp(12px,3.5vw,14px)!important;padding:clamp(8px,2.5vw,10px) clamp(16px,5vw,20px)!important}}@media (max-width:768px) and (min-width:601px){#bottom-controls,#top-row{gap:25px}#action-controls,#game-info,#grid-controls,#hint-section{gap:8px}#action-controls,#game-info{gap:0}}@media (max-width:480px){:root{--cell-size:22px}body{padding:.5vh .5vw}#bottom-controls,#top-row{gap:clamp(6px,1.5vh,10px)}.control-btn{padding:clamp(4px,1.5vw,6px) clamp(8px,2.5vw,10px);font-size:clamp(9px,2.8vw,11px)}#hearts{font-size:clamp(12px,3.5vw,16px);padding:clamp(3px,1vw,4px) clamp(6px,2vw,8px)}.hint-counter{width:clamp(12px,3.5vw,14px);height:clamp(12px,3.5vw,14px);font-size:clamp(7px,2vw,8px)}.clue-col,.clue-corner,.clue-row{font-size:clamp(6px,2vw,8px)}h2{font-size:clamp(1rem,3.5vw,1.4rem)}}@media (max-width:360px){:root{--cell-size:20px}body{padding:.3vh .3vw}.control-btn{padding:3px 6px;font-size:8px}#hearts{font-size:12px;padding:2px 4px}.clue-col,.clue-corner,.clue-row{font-size:6px}h2{font-size:1rem}}