.t48 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(340px, 100%); padding: 8px; background: var(--chip); border-radius: 14px; }
.t48-c { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; background: var(--bg); font-weight: 600; font-size: 28px; color: #2b2b2b; }
.t48-c.v2 { background: #eeeae4; } .t48-c.v4 { background: #ece0c8; }
.t48-c.v8 { background: #f2b179; color: #fff; } .t48-c.v16 { background: #f59563; color: #fff; }
.t48-c.v32 { background: #f67c5f; color: #fff; } .t48-c.v64 { background: #f65e3b; color: #fff; }
.t48-c.v128 { background: #edcf72; color: #fff; font-size: 24px; } .t48-c.v256 { background: #edcc61; color: #fff; font-size: 24px; }
.t48-c.v512 { background: #edc850; color: #fff; font-size: 24px; } .t48-c.v1024 { background: #edc53f; color: #fff; font-size: 20px; }
.t48-c.v2048, .t48-c.v4096 { background: #3fd77f; color: #fff; font-size: 20px; }
.t48-pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: 48px 48px; gap: 6px; }
.t48-pad .btn { justify-content: center; font-size: 20px; padding: 0; }
.t48-pad .up { grid-column: 2; } .t48-pad .left { grid-column: 1; grid-row: 2; }
.t48-pad .down { grid-column: 2; grid-row: 2; } .t48-pad .right { grid-column: 3; grid-row: 2; }