/* PixelCare skin for 2048: palette + pixel digits. Loaded after main.css. */
html,body{background:var(--page-bg) fixed;color:var(--text);margin:0;height:100%;overflow:hidden}
body{display:flex;align-items:flex-start;justify-content:center;padding:0}
.container{margin:0 auto;padding:56px 0 12px}
.title{font-family:var(--font-heading);font-weight:400;color:var(--text);font-size:44px;letter-spacing:0}
.score-container,.best-container{background:var(--surface-2);color:var(--text);font-family:var(--font-heading);font-size:16px;padding:0 14px;min-width:64px}
.score-container:after,.best-container:after{color:var(--muted);font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.06em}
.score-addition{color:var(--accent)}
.game-intro{color:var(--muted)}
.game-intro strong{color:var(--gold)}
.restart-button,.retry-button,.keep-playing-button{background:var(--accent)!important;color:var(--on-accent)!important;border-radius:12px!important;min-height:64px;line-height:64px!important;height:auto!important;font-family:var(--font-body);cursor:pointer}
.game-container{background:var(--surface-1);border:1px solid var(--border)}
.grid-cell{background:var(--grid)}
.game-message{background:rgba(10,15,30,.78)!important;color:var(--text)}
.game-message p{color:var(--text)!important;font-family:var(--font-heading);font-weight:400;font-size:28px!important}
.game-message.game-won{background:rgba(244,192,106,.25)!important}
.game-explanation,.pc-credit{color:var(--subtle);font-size:14px}
.game-explanation strong{color:var(--muted)}
.pc-credit{margin-top:8px}
hr{border:0;border-top:1px solid var(--border)}
/* Tiles: dark → bright as values grow */
.tile .tile-inner{font-family:var(--font-heading);font-weight:400;box-shadow:none;border-radius:6px;font-size:36px}
.tile.tile-2 .tile-inner{background:#283350;color:var(--text)}
.tile.tile-4 .tile-inner{background:#34406a;color:var(--text)}
.tile.tile-8 .tile-inner{background:var(--sky);color:var(--on-accent)}
.tile.tile-16 .tile-inner{background:var(--accent);color:var(--on-accent)}
.tile.tile-32 .tile-inner{background:var(--mint);color:var(--on-accent)}
.tile.tile-64 .tile-inner{background:var(--green);color:var(--on-accent)}
.tile.tile-128 .tile-inner{background:var(--gold);color:var(--on-accent);font-size:28px;box-shadow:0 0 18px rgba(244,192,106,.35)}
.tile.tile-256 .tile-inner{background:var(--orange);color:var(--on-accent);font-size:28px;box-shadow:0 0 18px rgba(238,163,107,.4)}
.tile.tile-512 .tile-inner{background:var(--coral);color:var(--on-accent);font-size:28px;box-shadow:0 0 20px rgba(242,135,122,.45)}
.tile.tile-1024 .tile-inner{background:var(--violet);color:var(--on-accent);font-size:21px;box-shadow:0 0 22px rgba(169,139,245,.5)}
.tile.tile-2048 .tile-inner{background:#ffd88a;color:var(--on-accent);font-size:21px;box-shadow:0 0 28px rgba(244,192,106,.7)}
.tile.tile-super .tile-inner{background:var(--text);color:var(--on-accent);font-size:16px}
@media screen and (max-width:520px){
  .container{padding-top:54px}
  .title{font-size:26px}
  .score-container,.best-container{font-size:12px;padding:0 8px;min-width:48px}
  .tile .tile-inner{font-size:20px}
  .tile.tile-128 .tile-inner,.tile.tile-256 .tile-inner,.tile.tile-512 .tile-inner{font-size:15px}
  .tile.tile-1024 .tile-inner,.tile.tile-2048 .tile-inner{font-size:11px}
  .tile.tile-super .tile-inner{font-size:9px}
  .game-message p{font-size:18px!important}
}
/* score boxes: label on top, value below (fits the pixel font) */
.score-container,.best-container{height:auto!important;line-height:1!important;padding:28px 14px 10px!important;border-radius:10px}
.score-container:after,.best-container:after{top:9px}
.container{padding-bottom:84px}
@media screen and (max-width:520px){.score-container,.best-container{padding:24px 8px 8px!important}.score-container:after,.best-container:after{top:7px;font-size:10px}}

/* Merge Tiles title: two lines in the pixel font */
.heading .title{font-size:26px;line-height:1.35}
@media (max-width:520px){.heading .title{font-size:17px}}