.game-shell--light{
  background:#faf8f2;
  color:#2f2a30;
}

.twenty-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:16px}
.twenty-header h1{margin:0;font-family:"Lora","Times New Roman",serif;font-size:2.2rem}
.twenty-header p{margin:4px 0 0;font-size:1rem;color:#6c5f73;max-width:360px}

.scoreboard{display:flex;gap:12px}
.score-box{background:#f0e6d8;border-radius:16px;padding:12px 18px;min-width:88px;text-align:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.12)}
.score-box .label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#85778c}
.score-box span:last-child{display:block;font-size:1.4rem;font-weight:700;color:#2f2a30}

.grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#d8cbbd;padding:12px;border-radius:18px;box-shadow:inset 0 2px 6px rgba(0,0,0,.08)}
.cell{background:#efe2d5;border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;box-shadow:inset 0 1px 3px rgba(0,0,0,.05)}
.tile{position:relative;width:86%;height:86%;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:"Lato","Open Sans",sans-serif;font-weight:700;font-size:2rem;color:#51455a;transition:transform .15s ease, background .2s ease;box-shadow:0 8px 18px rgba(0,0,0,.1)}
.tile span{position:relative}
.tile-2{background:#fef4e8;color:#6c5f73}
.tile-4{background:#fde7d3;color:#6c5f73}
.tile-8{background:#fbc7a7;color:#fff}
.tile-16{background:#f89bbf;color:#2f1322}
.tile-32{background:#e46aa3;color:#fff}
.tile-64{background:#c74e93;color:#fff}
.tile-128{background:#9c3b7a;color:#fff;font-size:1.8rem}
.tile-256{background:#7c2c62;color:#fff;font-size:1.8rem}
.tile-512{background:#5d2150;color:#fff;font-size:1.8rem}
.tile-1024{background:#45203f;color:#fff;font-size:1.6rem}
.tile-2048{background:#2f1b2d;color:#fff;font-size:1.6rem}
.tile-super{background:linear-gradient(135deg,#ffe066,#ff8787);color:#2f1b2d;font-size:1.5rem}
.tile.new{animation:pop .2s ease-out}
.tile.merge{animation:pulse .2s ease-out}

@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes pulse{from{transform:scale(1.05);}to{transform:scale(1);}}

.controls{text-align:right;margin:16px 0}

@media (max-width:720px){
  .twenty-header{align-items:flex-start}
  .scoreboard{width:100%;justify-content:flex-start}
  .tile{font-size:1.6rem}
}