@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700;800&display=swap');

*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html,
body{
margin:0;
width:100%;
height:100%;
overflow:hidden;
background:#05070d;
font-family:"Space Grotesk",sans-serif;
color:white;
}

body{
touch-action:manipulation;
}

.app{
height:100dvh;
display:flex;
flex-direction:column;
gap:10px;
padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom));
background:
radial-gradient(circle at top left,rgba(34,211,238,.22),transparent 30%),
radial-gradient(circle at bottom right,rgba(168,85,247,.2),transparent 35%),
linear-gradient(145deg,#020617,#0f172a);
}

.topbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.chip{
padding:9px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.08);
color:white;
text-decoration:none;
font-weight:800;
font-size:13px;
backdrop-filter:blur(12px);
}

.title-wrap{
text-align:center;
flex:1;
}

.title{
font-size:clamp(22px,6vw,40px);
font-weight:900;
letter-spacing:.12em;
color:#67e8f9;
text-shadow:0 0 18px rgba(103,232,249,.7);
}

.subtitle{
font-size:11px;
letter-spacing:.15em;
opacity:.7;
}

.hud{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:12px;
padding:10px;
border-radius:22px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
}

.counter{
display:grid;
text-align:center;
}

.counter span{
font-size:11px;
letter-spacing:.15em;
opacity:.75;
}

.counter strong{
font-size:32px;
}

.face{
width:64px;
height:64px;
border-radius:18px;
border:none;
font-size:32px;
background:linear-gradient(135deg,#67e8f9,#a855f7);
}

.difficulty{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:8px;
}

.mode{
height:40px;
border:none;
border-radius:999px;
background:rgba(255,255,255,.08);
color:white;
font-weight:800;
}

.mode.active{
background:linear-gradient(135deg,#67e8f9,#a855f7);
color:#020617;
}

.board-wrap{
flex:1;
display:flex;
align-items:center;
justify-content:center;
min-height:0;
}

#board{
display:grid;
gap:3px;
aspect-ratio:1/1;
width:min(100%,680px);
max-height:100%;
padding:10px;
border-radius:24px;
background:#94a3b8;
box-shadow:
inset 0 0 0 4px #e2e8f0,
inset 0 0 0 8px #64748b,
0 20px 50px rgba(0,0,0,.45);
}

.cell{
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:clamp(12px,3vw,24px);
user-select:none;
background:#cbd5e1;
border-top:3px solid #f8fafc;
border-left:3px solid #f8fafc;
border-right:3px solid #64748b;
border-bottom:3px solid #64748b;
}

.cell.revealed{
background:#94a3b8;
border:1px solid #64748b;
}

.cell.mine{
background:#ef4444;
}

.overlay{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.7);
backdrop-filter:blur(12px);
z-index:20;
padding:18px;
}

.overlay.show{
display:flex;
}

.panel{
position:relative;
width:min(92vw,520px);
padding:26px;
border-radius:24px;
background:#0f172a;
border:1px solid rgba(255,255,255,.12);
}

.close{
position:absolute;
right:12px;
top:12px;
width:42px;
height:42px;
border-radius:50%;
border:none;
font-size:24px;
}

@media(max-width:600px){
.face{
width:52px;
height:52px;
font-size:26px;
}

.mode{
height:34px;
font-size:12px;
}
}

.win31-titlebar {
height: 34px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 0 12px;
background: linear-gradient(90deg, #000080, #1084d0);
border-top: 2px solid #dbeafe;
border-left: 2px solid #dbeafe;
border-right: 2px solid #020617;
border-bottom: 2px solid #020617;
color: white;
font-weight: 900;
letter-spacing: .04em;
box-shadow: 0 8px 20px rgba(0,0,0,.28);
}

.win31-buttons {
display: flex;
gap: 4px;
}

.win31-buttons b {
width: 22px;
height: 22px;
display: grid;
place-items: center;
background: #c0c0c0;
color: #111827;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
font-size: 13px;
line-height: 1;
}

.flag-tools {
display: grid;
gap: 4px;
}

.flag-toggle {
height: 38px;
border-radius: 0;
border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;
border-right: 3px solid #404040;
border-bottom: 3px solid #404040;
background: #c0c0c0;
color: #111827;
font-family: inherit;
font-size: 15px;
font-weight: 900;
}

.flag-toggle.active {
background: #fde68a;
color: #111827;
}

.flag-tools p {
margin: 0;
font-size: 12px;
color: #cbd5e1;
text-align: center;
}

.cell.flagged {
background: #c0c0c0;
}

.cell.n1 { color: #0000ff; }
.cell.n2 { color: #008000; }
.cell.n3 { color: #ff0000; }
.cell.n4 { color: #000080; }
.cell.n5 { color: #800000; }
.cell.n6 { color: #008080; }
.cell.n7 { color: #000000; }
.cell.n8 { color: #808080; }

.cell,
.cell.revealed,
.cell.flagged,
.cell.mine {
aspect-ratio: 1 / 1;
min-width: 0;
min-height: 0;
line-height: 1;
}

.cell.revealed {
border-top: 3px solid #64748b;
border-left: 3px solid #64748b;
border-right: 3px solid #64748b;
border-bottom: 3px solid #64748b;
}

.cell.flagged {
border-top: 3px solid #f8fafc;
border-left: 3px solid #f8fafc;
border-right: 3px solid #64748b;
border-bottom: 3px solid #64748b;
}

.win-button,
.mode,
.flag-toggle {
border-radius: 0 !important;
background: #c0c0c0 !important;
color: #111 !important;
border-top: 3px solid #ffffff !important;
border-left: 3px solid #ffffff !important;
border-right: 3px solid #404040 !important;
border-bottom: 3px solid #404040 !important;
box-shadow: none !important;
font-family: "MS Sans Serif", "Space Grotesk", system-ui, sans-serif !important;
font-weight: 900 !important;
}

.win-button:active,
.mode:active,
.flag-toggle:active {
border-top: 3px solid #404040 !important;
border-left: 3px solid #404040 !important;
border-right: 3px solid #ffffff !important;
border-bottom: 3px solid #ffffff !important;
background: #b8b8b8 !important;
transform: translate(1px, 1px);
}

.mode.active,
.flag-toggle.active {
background: #dcdcdc !important;
outline: 2px dotted #111;
outline-offset: -6px;
}