*{margin:0;padding:0;box-sizing:border-box}@supports (padding:max(0px)){body{padding-left:max(.5vw,env(safe-area-inset-left));padding-right:max(.5vw,env(safe-area-inset-right));padding-top:max(.5vh,env(safe-area-inset-top));padding-bottom:max(.5vh,env(safe-area-inset-bottom))}}html{height:100%;overflow:hidden;margin:0;padding:0}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1vh 1vw;color:#fff;transition:all .3s ease;box-sizing:border-box;overflow:hidden;margin:0}.dark{background:linear-gradient(135deg,#2c3e50 0,#34495e 100%);color:#ecf0f1}main{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;gap:clamp(.5vh,1vh,2vh)}h2{color:#fff;margin:0;font-size:clamp(1.2rem,3.5vw,2rem);text-shadow:2px 2px 4px rgba(0,0,0,.3);text-align:center;font-weight:700;line-height:1.1}.title-container{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;flex-shrink:0;width:100%}.dark h2{color:#ecf0f1;text-shadow:2px 2px 4px rgba(0,0,0,.5)}#controls{width:100%;max-width:100vw;margin:0;display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding:0 1vw}#top-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(4px,1.5vw,8px);padding:.5vh 0;width:100%}#game-info,#game-stats,#grid-controls{display:flex;align-items:center;gap:6px}.control-select{background:0 0;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:clamp(4px,1.5vw,8px) clamp(6px,2vw,12px);font-size:clamp(11px,2.5vw,14px);font-weight:600;cursor:pointer;transition:all .3s ease;outline:0;color:#fff}.control-select:hover{border-color:#667eea;background:rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(102,126,234,.2)}.dark .control-select{background:0 0;border:1px solid rgba(255,255,255,.2)}.dark .control-select:hover{border-color:#74b9ff;background:rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(116,185,255,.2)}.control-btn{background:0 0;border:1px solid rgba(255,255,255,.3);color:#fff;padding:clamp(6px,1.5vw,10px) clamp(8px,2vw,14px);border-radius:6px;cursor:pointer;font-size:clamp(11px,2.5vw,14px);transition:all .3s ease;font-weight:600}.control-btn:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.control-btn.primary{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border:1px solid rgba(102,126,234,.5);box-shadow:0 2px 8px rgba(102,126,234,.2)}.control-btn.primary:hover{background:linear-gradient(135deg,#5a6fd8 0,#6a4190 100%);box-shadow:0 4px 12px rgba(102,126,234,.3)}.dark .control-btn{background:0 0;border:1px solid rgba(255,255,255,.2)}.dark .control-btn:hover{background:rgba(255,255,255,.1);box-shadow:0 4px 12px rgba(255,255,255,.1)}.hint-btn{background:linear-gradient(135deg,#f093fb 0,#f5576c 100%);border:1px solid rgba(240,147,251,.5)}.hint-btn:hover{background:linear-gradient(135deg,#ee88f7 0,#f34a5a 100%);box-shadow:0 4px 12px rgba(240,147,251,.3)}.info-display{font-size:clamp(11px,2.5vw,14px);font-weight:600;padding:clamp(4px,1.5vw,8px) clamp(6px,2vw,12px);background:rgba(255,255,255,.1);border-radius:6px;color:#fff;border:1px solid rgba(255,255,255,.2);text-shadow:1px 1px 2px rgba(0,0,0,.5);min-width:clamp(60px,15vw,100px);text-align:center}.dark .info-display{background:0 0;color:#ecf0f1;border:1px solid rgba(255,255,255,.2)}#game-container{display:flex;justify-content:center;align-items:center;width:100vw;min-height:0;overflow:hidden;padding:0;margin:0;flex-shrink:1}#game{display:grid;gap:1px;background:#2c3e50;padding:clamp(4px,1vw,8px);border-radius:clamp(6px,1.5vw,10px);box-shadow:0 8px 32px rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.15);max-width:98vw;max-height:85vh;overflow:auto;margin:0}.dark #game{background:#1a252f;border:2px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.5)}.cell{width:clamp(18px,3.5vw,32px);height:clamp(18px,3.5vw,32px);background:linear-gradient(135deg,#ecf0f1 0,#bdc3c7 100%);display:flex;justify-content:center;align-items:center;font-weight:700;font-size:clamp(9px,2vw,15px);cursor:pointer;user-select:none;border-radius:4px;transition:all .2s ease;border:1px solid #95a5a6;border-top-color:#fff;border-left-color:#fff;border-bottom-color:#7f8c8d;border-right-color:#7f8c8d;box-shadow:0 3px 6px rgba(0,0,0,.15)}.cell:hover:not(.revealed){background:linear-gradient(135deg,#f8f9fa 0,#d5dbdb 100%);transform:scale(.95);box-shadow:0 4px 12px rgba(0,0,0,.2)}.cell.revealed{background:linear-gradient(135deg,#f4f6f7 0,#bffeff 100%);cursor:default;color:#2c3e50;border:1px solid #7f8c8d;border-top-color:#6c7b7d;border-left-color:#6c7b7d;border-bottom-color:#95a5a6;border-right-color:#95a5a6;box-shadow:inset 3px 3px 6px rgba(0,0,0,.25),inset -2px -2px 4px rgba(255,255,255,.4);transform:none}.cell.flagged{background:linear-gradient(135deg,#ff6b6b 0,#e55353 100%);border:1px solid #c0392b;border-top-color:#f99;border-left-color:#f99;border-bottom-color:#a93226;border-right-color:#a93226;box-shadow:0 3px 8px rgba(231,76,60,.4);color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.cell.mine{background:linear-gradient(135deg,#e74c3c 0,#c0392b 100%);color:#fff;border:1px solid #a93226;animation:explode .3s ease-out}.cell.mine-hit{background:linear-gradient(135deg,#ff6b6b 0,#ee5a52 100%);animation:shake .5s ease-in-out}@keyframes explode{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}.cell.revealed[data-count="1"]{color:#2980b9;font-weight:700}.cell.revealed[data-count="2"]{color:#16a085;font-weight:700}.cell.revealed[data-count="3"]{color:#e74c3c;font-weight:700}.cell.revealed[data-count="4"]{color:#8e44ad;font-weight:700}.cell.revealed[data-count="5"]{color:#d35400;font-weight:700}.cell.revealed[data-count="6"]{color:#c0392b;font-weight:700}.cell.revealed[data-count="7"]{color:#1a252f;font-weight:700}.cell.revealed[data-count="8"]{color:#5d6d7e;font-weight:700}#bottom-controls{display:flex;justify-content:center;align-items:center;width:100%;max-width:100vw;padding:0 1vw;margin:0;gap:clamp(8px,2vw,16px);flex-shrink:0}.toggle-group{display:flex;background:0 0;border-radius:6px;padding:2px;gap:2px;border:1px solid rgba(255,255,255,.2);font-size:12px}.dark .toggle-group{background:0 0;border:1px solid rgba(255,255,255,.15)}.radio-label{display:flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .3s ease;font-weight:500;color:rgba(255,255,255,.8);font-size:12px}.dark .radio-label{color:rgba(236,240,241,.8)}.radio-label input[type=radio]{display:none}.radio-label input[type=radio]:checked+.mode-icon{background:rgba(255,255,255,.2);color:#fff;border-radius:4px;padding:3px 6px;box-shadow:0 2px 6px rgba(255,255,255,.1)}.dark .radio-label input[type=radio]:checked+.mode-icon{background:rgba(255,255,255,.15);color:#ecf0f1;box-shadow:0 2px 6px rgba(255,255,255,.05)}.mode-icon{font-size:18px;transition:all .3s ease}#gameover,#gamewin{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:1000;backdrop-filter:blur(5px)}.gameover-content,.gamewin-content{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);padding:clamp(20px,5vw,40px);border-radius:clamp(12px,3vw,20px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.2);max-width:min(90vw,400px);width:90%}.gamewin-content{background:linear-gradient(135deg,#56ab2f 0,#a8e6cf 100%)}.gameover-content h3,.gamewin-content h3{color:#fff;margin-bottom:15px;font-size:clamp(1.2rem,5vw,2rem)}.gameover-content p,.gamewin-content p{color:rgba(255,255,255,.9);margin-bottom:25px;font-size:clamp(.9rem,3vw,1.1rem);line-height:1.5}.gameover-btn,.gamewin-btn{background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.3);color:#fff;padding:clamp(8px,2vw,12px) clamp(15px,4vw,25px);border-radius:10px;font-size:clamp(12px,3vw,16px);font-weight:600;cursor:pointer;transition:all .3s ease}.gameover-btn:hover,.gamewin-btn:hover{background:rgba(255,255,255,.3);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.2)}.hidden{display:none!important}@media (min-width:1024px){body{padding:5vh 5vw}#bottom-controls,#controls{max-width:600px}}@media (max-width:1023px) and (min-width:768px){body{padding:5vh 3vw}h2{font-size:clamp(1.8rem,4vw,2.2rem)}.cell{width:clamp(25px,4.5vw,32px);height:clamp(25px,4.5vw,32px);font-size:clamp(12px,3vw,15px)}}@media (max-width:767px){html{overflow:hidden}body{padding:.5vh .5vw;height:100vh;width:100vw;overflow:hidden;justify-content:center}main{gap:clamp(.3vh,.8vh,1.5vh);height:100%;justify-content:center}h2{font-size:clamp(1rem,4vw,1.4rem);margin:0}.title-container{margin:0}#controls{margin:0;padding:0 .5vw}#top-row{flex-wrap:wrap;gap:clamp(4px,1.5vw,8px);justify-content:center;padding:0}#game-container{width:100vw;padding:0;margin:0}#game{max-width:99vw;max-height:70vh;padding:clamp(3px,1vw,6px);border-radius:clamp(4px,1vw,8px);gap:.5px}.cell{width:clamp(16px,3.2vw,26px);height:clamp(16px,3.2vw,26px);font-size:clamp(8px,1.8vw,12px)}#bottom-controls{flex-wrap:wrap;gap:clamp(6px,1.5vw,12px);padding:0 .5vw;margin:0}.control-btn,.control-select{font-size:clamp(9px,2.2vw,11px);padding:clamp(3px,.8vw,5px) clamp(5px,1.5vw,8px)}.info-display{font-size:clamp(9px,2.2vw,11px);padding:clamp(2px,.8vw,4px) clamp(4px,1.5vw,6px);min-width:clamp(45px,10vw,70px)}.toggle-group{gap:1px}.radio-label{padding:clamp(3px,1vw,5px) clamp(5px,1.5vw,8px);font-size:clamp(8px,1.8vw,10px)}.mode-icon{font-size:clamp(10px,2.5vw,14px)}}@media (max-width:480px){body{padding:.3vh .3vw;justify-content:center}main{gap:clamp(.2vh,.6vh,1vh);justify-content:center}h2{font-size:clamp(.9rem,4.5vw,1.2rem);margin:0}.title-container{margin:0}#controls{margin:0;padding:0 .3vw}#top-row{padding:0;gap:clamp(3px,1vw,6px)}#game{max-width:99.5vw;max-height:75vh;gap:.5px;padding:clamp(2px,.8vw,4px);border-radius:clamp(3px,.8vw,6px)}.cell{width:clamp(14px,3vw,22px);height:clamp(14px,3vw,22px);font-size:clamp(7px,1.6vw,10px)}#bottom-controls{gap:clamp(4px,1.2vw,8px);padding:0 .3vw;margin:0}.control-btn,.control-select{font-size:clamp(8px,2vw,10px);padding:clamp(2px,.6vw,4px) clamp(4px,1.2vw,6px)}.info-display{font-size:clamp(8px,2vw,10px);padding:clamp(2px,.6vw,3px) clamp(3px,1.2vw,5px);min-width:clamp(40px,8vw,60px)}.radio-label{padding:clamp(2px,.8vw,4px) clamp(4px,1.2vw,6px)}.mode-icon{font-size:clamp(9px,2.2vw,12px)}}@media (max-width:360px){body{padding:.2vh .2vw;justify-content:center}main{gap:clamp(.1vh,.4vh,.8vh);justify-content:center}h2{font-size:clamp(.8rem,5vw,1rem);margin:0}.title-container{margin:0}#controls{margin:0;padding:0 .2vw}#top-row{padding:0;gap:clamp(2px,.8vw,4px)}#game{max-width:99.8vw;max-height:78vh;gap:.3px;padding:clamp(1px,.5vw,3px);border-radius:clamp(2px,.6vw,4px)}.cell{width:clamp(12px,2.8vw,18px);height:clamp(12px,2.8vw,18px);font-size:clamp(6px,1.4vw,8px)}#bottom-controls{gap:clamp(3px,1vw,6px);padding:0 .2vw}.control-btn,.control-select{font-size:clamp(7px,1.8vw,9px);padding:clamp(1px,.5vw,3px) clamp(3px,1vw,5px)}.info-display{font-size:clamp(7px,1.8vw,9px);padding:clamp(1px,.5vw,2px) clamp(2px,1vw,4px);min-width:clamp(35px,7vw,50px)}.radio-label{padding:clamp(1px,.6vw,3px) clamp(3px,1vw,5px)}.mode-icon{font-size:clamp(8px,2vw,10px)}}@media (max-height:500px) and (orientation:landscape){body{padding:.5vh .5vw;flex-direction:row;justify-content:space-around;align-items:center}.title-container{position:absolute;top:.5vh;left:50%;transform:translateX(-50%);margin-bottom:0;z-index:10}h2{font-size:clamp(.8rem,3vh,1.2rem);margin-bottom:0}#controls{position:absolute;left:.5vw;top:50%;transform:translateY(-50%);flex-direction:column;gap:.5vh;max-width:20vw;margin-bottom:0}#top-row{flex-direction:column;gap:.5vh;padding:0}#game-container{flex:none;width:60vw;height:98vh;margin:0;padding:0}#game{max-height:95vh;max-width:58vw;margin:0}#bottom-controls{position:absolute;right:.5vw;top:50%;transform:translateY(-50%);flex-direction:column;gap:.5vh;max-width:20vw;margin:0;padding:0}.cell{width:clamp(10px,2vh,16px);height:clamp(10px,2vh,16px);font-size:clamp(6px,1.2vh,10px)}.control-btn,.control-select{font-size:clamp(7px,1.5vh,10px);padding:clamp(2px,.5vh,4px) clamp(3px,1vh,6px)}.info-display{font-size:clamp(7px,1.5vh,10px);padding:clamp(1px,.5vh,3px) clamp(2px,1vh,4px);min-width:clamp(30px,6vw,50px)}}