.mahjong-area { max-width:520px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.stats { display:flex; gap:16px; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.stats b { color:var(--ink); font-size:16px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.table { position:relative; margin:0 auto; width:392px; height:206px; border-radius:10px; overflow:hidden; }
.tile { position:absolute; width:56px; height:40px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:var(--ink); font-size:22px; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.tile.free { border-color:var(--blue); }
.tile.blocked { opacity:.55; cursor:not-allowed; }
.tile.selected { border-color:var(--orange); box-shadow:0 0 0 2px var(--orange); }
.tile.paired { opacity:0; transform:scale(.6); transition:opacity .25s,transform .25s; pointer-events:none; }
.tile.hint { border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan); }
.win-panel { max-width:360px; margin:14px auto 0; padding:24px; text-align:center; }
.win-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.win-panel p { color:var(--muted); font-size:14px; margin:0 0 14px; }
@media (max-width:780px) { .controls { flex-direction:column; align-items:stretch; } .stats { justify-content:space-between; } .table { transform-origin:top center; } }