:root{

--bg:#0f172a;
--panel:#1e293b;

--cell:#334155;
--opened:#e5e7eb;

--text:white;

--accent:#22c55e;

}

body.light{

--bg:#f1f5f9;
--panel:#ffffff;

--cell:#cbd5f5;
--opened:#ffffff;

--text:#111;

}

body{

margin:0;

font-family:system-ui,Segoe UI,Arial;

background:var(--bg);

color:var(--text);

display:flex;
justify-content:center;

}

.game{

margin-top:30px;

background:var(--panel);

padding:25px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

h1{

text-align:center;

margin-top:0;

font-weight:600;

}

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.counter{

background:black;

color:#00ff88;

padding:6px 14px;

border-radius:8px;

font-weight:bold;

font-family:monospace;

}

#faceButton{

font-size:28px;

width:50px;
height:50px;

border-radius:10px;

border:none;

cursor:pointer;

background:#facc15;

transition:.2s;

}

#faceButton:hover{

transform:scale(1.1);

}

.controls{

text-align:center;

margin-top:10px;

}

button,select{

padding:6px 12px;

margin:5px;

border-radius:8px;

border:none;

cursor:pointer;

background:#2563eb;

color:white;

font-size:14px;

transition:.2s;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 5px 15px rgba(0,0,0,.3);

}

.info{

text-align:center;

margin-top:8px;

}

.stats{

text-align:center;

font-size:13px;

opacity:.8;

margin-top:4px;

}

#board{

display:grid;

gap:4px;

margin:20px auto;

justify-content:center;

padding:12px;

background:#0f172a;

border-radius:14px;

}

.cell{

width:36px;
height:36px;

background:var(--cell);

border-radius:6px;

display:flex;
align-items:center;
justify-content:center;

font-weight:bold;

cursor:pointer;

transition:.15s;

}

.cell:hover{

transform:scale(1.08);

}

.opened{

background:var(--opened);

color:black;

animation:openCell .15s ease;

}

.mine{

background:#ef4444;

color:white;

animation:explode .3s ease;

}

.flag{

background:#f59e0b;

}

#statusMessage{

text-align:center;

font-size:20px;

margin-top:10px;

font-weight:bold;

}

.cell[data-num="1"]{color:#3b82f6;}
.cell[data-num="2"]{color:#16a34a;}
.cell[data-num="3"]{color:#ef4444;}
.cell[data-num="4"]{color:#7c3aed;}
.cell[data-num="5"]{color:#ea580c;}
.cell[data-num="6"]{color:#06b6d4;}
.cell[data-num="7"]{color:#111;}
.cell[data-num="8"]{color:#475569;}

@keyframes openCell{

from{transform:scale(.7);opacity:.3;}
to{transform:scale(1);opacity:1;}

}

@keyframes explode{

0%{transform:scale(.5)}
50%{transform:scale(1.3)}
100%{transform:scale(1)}

}

@media(max-width:600px){

.cell{

width:28px;
height:28px;

font-size:12px;

}

}