*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Arial,sans-serif;background:#111;color:#fff;display:flex;justify-content:center;align-items:center}
.app{width:min(720px,94vw)}
header{text-align:center;margin-bottom:20px}
h1{margin:0 0 8px;font-size:34px}
header p{margin:0;color:#aaa}
.card{background:#1b1b1b;border:1px solid #333;border-radius:18px;padding:24px;box-shadow:0 15px 45px #0008}
.stats{display:flex;justify-content:space-between;margin-bottom:18px;color:#ccc}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.cell{aspect-ratio:1;border:1px solid #444;border-radius:14px;background:#252525;display:flex;align-items:center;justify-content:center;font-size:42px;cursor:pointer;transition:.15s}
.cell:hover{transform:translateY(-2px);background:#303030}
.cell.active{background:#3a3a3a;border-color:#aaa}
button{width:100%;padding:15px;border:0;border-radius:12px;background:#eee;color:#111;font-weight:700;font-size:16px;cursor:pointer}
button:hover{opacity:.9}
.message{text-align:center;color:#bbb;min-height:22px}