:root{
--bg:#f4f4f4;
--surface:rgba(255,255,255,.42);
--surface-hover:rgba(255,255,255,.9);
--border:rgba(0,0,0,.1);
--text:#1a1a1a;
--text-secondary:#666;
--accent:#00a8e8;
--board:rgba(0,0,0,.06);
--cell:rgba(255,255,255,.7)
}
[data-theme="dk"]{
--bg:#101214;
--surface:rgba(30,32,35,.82);
--surface-hover:rgba(255,255,255,.1);
--border:rgba(255,255,255,.1);
--text:#f5f5f5;
--text-secondary:#aaa;
--accent:#00c8ff;
--board:rgba(0,0,0,.25);
--cell:rgba(255,255,255,.07)
}
body,.gwin,.ah,.gc,.tb,.hb,.rb,.ct,.c,.b,.cll,.difmen,.difmen button{
    user-select: none;
    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        width 250ms ease;
}
*{
box-sizing:border-box;
margin:0;
padding:0
}
body{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
font-family:"Segoe UI",sans-serif;
background:var(--bg);
color:var(--text)
}
.gwin{
flex-shrink: 0;
width:100%;
height:100%;
min-width:0;
min-height: 0;
border:1px solid var(--border);
border-radius:24px;
background:var(--surface);
box-shadow:0 24px 60px rgba(0,0,0,.18);
overflow:hidden;
}
.ah{
min-width: 0;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
padding:18px 20px 12px
}
.tit{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
font-size:18px;
font-weight:600
}
.tic{
font-size:20px
}
.tb{
width:36px;
height:36px;
justify-self:end;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border);
border-radius:24px;
background:var(--cell);
color:var(--text);
font-size:18px;
cursor:pointer
}
.tb:hover{
background:var(--surface-hover)
}
.dif{
position:relative
}
.hb{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:1px solid var(--border);
border-radius:24px;
background:var(--cell);
color:var(--text);
cursor:pointer
}
.hb svg{
width:19px;
height:19px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.hb:hover{
background:var(--surface-hover)
}
.difmen{
backdrop-filter: blur(28px);
position:absolute;
top:calc(100% + 7px);
left:0;
opacity:0;
visibility: hidden;
width:150px;
padding:5px;
border:1px solid var(--border);
border-radius:24px;
background:var(--surface);
box-shadow:0 12px 30px rgba(0,0,0,.15);
transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    transform:translateY(-6px) scale(0.96);
    transform-origin:top left;
z-index:100
}
.difmen.open{
    opacity:1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.difmen button{
width:100%;
height:36px;
border:none;
border-radius:24px;
padding:0 11px;
background:transparent;
color:var(--text);
text-align:left;
font:inherit;
font-size:13px;
cursor:pointer
}
.difmen button:hover{
background:var(--surface-hover)
}
.gc{
padding:20px;
min-width:0;
min-height:0;
overflow:auto;
}
.hd{
min-width: 0;
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px
}
.c,.ct{
min-width:82px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
padding:8px 12px;
border-radius:24px;
background:var(--cell);
font-family:monospace;
font-size:16px
}
.rb{
width:42px;
height:42px;
border:1px solid var(--border);
border-radius:24px;
background:var(--cell);
color:inherit;
font-size:20px;
cursor:pointer
}
.rb:hover{
background:var(--surface-hover)
}
.b{
display:grid;
grid-template-columns: repeat(var(--cols),minmax(0,1fr));
gap:3px;
width:100%;
max-width:100%;
padding:5px;
border-radius:16px;
background:var(--board)
}
.cll{
min-width:0;
width:100%;
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border);
border-radius:12px;
background:var(--cell);
font-size:16px;
font-weight:600;
cursor:pointer;
user-select:none;
transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease,
        color 0.18s ease;
}
.cll:hover{
background:var(--surface-hover);
transform: scale(1.05);
}
.cll.revealed{
background:var(--board);
cursor:default;
transform:scale(1);
}
.cll.flagged{
font-size:14px;
}