:root{
--u:min(1vw,1vh);
--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);
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body,.gwin,.ah,.gc,.tb,.rb,.b,.cll,.ov,.ng{
user-select:none;
transition:background-color 0.25s ease,border-color 0.25s ease,color 0.25s ease,box-shadow 0.25s ease;
}
body{
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
font-family:"Segoe UI",sans-serif;
background:var(--bg);
color:var(--text);
overflow:hidden;
}
.gwin{
position:relative;
width:min(480px,92vw,80vh);
border:calc(var(--u)*.1) solid var(--border);
border-radius:24px;
background:var(--surface);
box-shadow:0 calc(var(--u)*2.4) calc(var(--u)*6) rgba(0,0,0,.18);
overflow:hidden;
}
.ah{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
padding:calc(var(--u)*1.8) calc(var(--u)*2) calc(var(--u)*1.2);
}
.tit{
display:flex;
align-items:center;
justify-content:center;
gap:calc(var(--u)*.9);
font-size:calc(var(--u)*1.8);
font-weight:600
}
.tic{
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--u)*3.2);
height:calc(var(--u)*3.2);
border-radius:24px;
background:#6ab7ff;
color:#1a1a1a;
font-size:calc(var(--u)*.95);
font-weight:700;
letter-spacing:calc(var(--u)*-.04);
}
.tb{
justify-self:end;
width:calc(var(--u)*3.6);
height:calc(var(--u)*3.6);
display:flex;
align-items:center;
justify-content:center;
border:calc(var(--u)*.1) solid var(--border);
border-radius:50%;
background:var(--cell);
color:var(--text);
font-size:calc(var(--u)*1.8);
cursor:pointer;
}
.tb:hover{
background:var(--surface-hover);
}
.gc{
padding:calc(var(--u)*2);
min-width:0
}
.sc{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:calc(var(--u)*1.2);
margin-bottom:calc(var(--u)*1.8);
}
.scr{
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:calc(var(--u)*.2);
padding:calc(var(--u)*.8) calc(var(--u)*1.2);
border-radius:24px;
background:var(--cell);
}
.sc .scr:first-child{
justify-self:start;
}
.sc .scr:last-child{
justify-self:end;
}
.scr span{
color:var(--text-secondary);
font-size:calc(var(--u)*1);
font-weight:600;
letter-spacing:calc(var(--u)*.07);
}
.scr strong{
font-family:monospace;
font-size:calc(var(--u)*1.7);
font-weight:600;
line-height:1.1;
}
.rb{
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--u)*4.2);
height:calc(var(--u)*4.2);
border:calc(var(--u)*.1) solid var(--border);
border-radius:50%;
background:var(--cell);
color:inherit;
font-size:calc(var(--u)*2);
cursor:pointer;
transition:background-color 0.25s ease,border-color 0.25s ease,color 0.25s ease,transform 0.12s ease;
}
.rb:hover{
background:var(--surface-hover)
}
.rb:active{
transform:scale(.94)
}
.b{
position:relative;
width:100%;
aspect-ratio:1;
padding:calc(var(--u)*.5);
border-radius:24px;
background:var(--board);
}
.cll{
position:absolute;
width:calc((100% - 15px)/4);
aspect-ratio:1;
display:flex;
align-items:center;
justify-content:center;
border:calc(var(--u)*.1) solid var(--border);
border-radius:24px;
background:var(--cell);
font-size:calc(var(--u)*3.2);
font-weight:600;
cursor:default;
user-select:none;
transition:transform 0.16s ease, background-color 0.18s ease, border-color 180ms ease, color 0.18s ease;
}
.cll.revealed{
background:var(--board);
cursor:default;
transform:scale(1);
}
.cll.flagged{
font-size:14px;
}
.cll.merge{
animation:merge 0.12s ease;
}
.cll.new{
animation:tileIn 0.16s ease-out;
}
@keyframes tileIn{
from{
opacity:0;
transform:scale(0.85);
}
to{
opacity:1;
transform:scale(1);
}
}
@keyframes merge{
50%{transform:scale(1.12)};
100%{transform:scale(1)};
}
.ov{
position:absolute;
inset:0;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:calc(var(--u)*1);
padding:calc(var(--u)*3);
background:var(--surface);
backdrop-filter:blur(calc(var(--u)*1.8));
-webkit-backdrop-filter:blur(calc(var(--u)*1.8));
text-align:center;
z-index:10;
}
.ov.open{
display:flex;
}
.ovi{
font-size:calc(var(--u)*4.2);
}
.ovt{
font-size:calc(var(--u)*2.4);
font-weight:600
}
.ovp{
color:var(--text-secondary);
font-size:calc(var(--u)*1.4);
}
.ng{
margin-top:calc(var(--u)*.8);
padding:calc(var(--u)*1) calc(var(--u)*2);
border:calc(var(--u)*.1) solid var(--border);
border-radius:calc(var(--u)*2.4);
background:var(--cell);
color:var(--text);
font:inherit;
font-size:calc(var(--u)*1.4);
font-weight:600;
cursor:pointer;
}
.ng:hover{
background:var(--surface-hover);
}
.cll[data-val="2"]{background:#cfe8ff}
.cll[data-val="4"]{background:#c9f7f5}
.cll[data-val="8"]{background:#d8f3dc}
.cll[data-val="16"]{background:#fff1b8}
.cll[data-val="32"]{background:#ffd8b8}
.cll[data-val="64"]{background:#ffc7c7}
.cll[data-val="128"]{background:#e5d4ff}
.cll[data-val="256"]{background:#f7c8e0}
.cll[data-val="512"]{background:#bcdcff}
.cll[data-val="1024"]{background:#ffcf9f}
.cll[data-val="2048"]{background:#b8f3ff}
[data-theme="dk"] .cll[data-val="2"]{background:#234b68;color:#d9f0ff}
[data-theme="dk"] .cll[data-val="4"]{background:#205c60;color:#d8ffff}
[data-theme="dk"] .cll[data-val="8"]{background:#315c3b;color:#dcffe3}
[data-theme="dk"] .cll[data-val="16"]{background:#665a2b;color:#fff3b8}
[data-theme="dk"] .cll[data-val="32"]{background:#68452f;color:#ffe0c4}
[data-theme="dk"] .cll[data-val="64"]{background:#693b3b;color:#ffdada}
[data-theme="dk"] .cll[data-val="128"]{background:#4d3b6b;color:#eadcff}
[data-theme="dk"] .cll[data-val="256"]{background:#633b57;color:#ffd9ed}
[data-theme="dk"] .cll[data-val="512"]{background:#31577a;color:#d9ecff}
[data-theme="dk"] .cll[data-val="1024"]{background:#70502f;color:#ffe2bd}
[data-theme="dk"] .cll[data-val="2048"]{background:#236276;color:#d5f8ff}