:root{
  --bg:#f6f6f6;
  --fg:#111;
  --muted:#666;
  --accent:#6b8afd;
  --accent-2:#e94057;
  --success:#2ab27b;
  --link:#1a5fff;
  --tile-empty:#e9e9ef;
  /* Fresh blue → red palette */
  --tile-2:#d6e4ff;      /* light blue */
  --tile-4:#b7d0ff;
  --tile-8:#8db6ff;
  --tile-16:#6a9afc;     /* white text */
  --tile-32:#4d7cff;     /* white text */
  --tile-64:#355bdb;     /* white text */
  --tile-128:#a98cf6;    /* violet */
  --tile-256:#f59aa0;    /* salmon */
  --tile-512:#f56b7b;    /* coral red */
  --tile-1024:#e94057;   /* vivid red */
  --tile-2048:#c81e42;   /* deep red */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
}

/* Global link styling */
a{color:var(--link);text-decoration:underline}
a:hover{filter:brightness(1.05)}

.app-header{
  display:flex;flex-direction:column;align-items:stretch;gap:.75rem;
  max-width:900px;margin:0 auto;padding:calc(1rem + env(safe-area-inset-top)) 1rem 0.5rem;
}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.header-top .lang-wrap select{min-width:140px}
.brand{display:flex;align-items:center;gap:.6rem}
.logo{width:40px;height:40px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.app-header h1{margin:0;font-weight:800;font-size:clamp(1.3rem,3.4vw,1.8rem);
  background:linear-gradient(90deg, #6b8afd 0%, #a98cf6 45%, #e94057 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.2px}
.header-actions{display:grid;gap:0.5rem;align-items:center;grid-template-columns:repeat(auto-fit, minmax(120px, max-content))}
.header-actions .switch{justify-content:flex-start}
select, .btn{
  padding:0.55rem 0.9rem;border-radius:12px;border:1px solid #d9d9e0;background:#fff;color:var(--fg);
  min-height:44px; /* comfortable touch target */
  min-width:44px;
}
.btn.icon{padding:0.5rem;min-width:auto;display:inline-flex;align-items:center;justify-content:center}
.btn.icon svg{width:18px;height:18px;display:block}
.btn{background:linear-gradient(180deg, var(--accent) 0%, #4e67d6 100%);color:#fff;border:none;box-shadow:0 1px 0 rgba(0,0,0,.06), 0 6px 16px rgba(73, 100, 200, .2)}
.btn.secondary{background:#fff;color:var(--fg);border:1px solid #ddd}
.btn.success{background:var(--success)}
.btn:active{transform:translateY(1px)}
select{
  background:
    linear-gradient(180deg,#fff, #f7f7fb) padding-box,
    linear-gradient(180deg, #e3e3ec, #d3d3de) border-box;
  border:1px solid transparent;
  box-shadow:0 1px 0 rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.6);
}
select:focus, .btn:focus{outline:none;box-shadow:0 0 0 3px rgba(107,138,253,.3)}

/* Toggle switches */
.switch{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .3rem;border:1px solid #d9d9e0;border-radius:999px;background:
  linear-gradient(180deg,#fff,#f7f7fb) padding-box,
  linear-gradient(180deg,#e3e3ec,#d3d3de) border-box;}
.switch input{position:absolute;opacity:0}
.switch .slider{position:relative;width:32px;height:18px;border-radius:999px;background:#d6d7db;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}
.switch .slider::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.switch input:checked + .slider{background:linear-gradient(180deg, var(--accent) 0%, #4e67d6 100%)}
.switch input:checked + .slider::after{transform:translateX(14px)}
.switch .switch-label{font-size:.85rem;color:var(--muted)}

.app-main{max-width:900px;margin:0 auto;padding:1rem}

.hud{display:flex;gap:1rem;margin-bottom:1.25rem}
.hud{justify-content:center}
.score{background:#fff;border:1px solid #e6e6e9;border-radius:12px;padding:0.65rem 0.9rem;display:flex;gap:0.5rem;align-items:baseline;text-align:center}
.score .label{color:var(--muted);font-size:1rem}
#score,#best{font-weight:800;font-size:1.25rem}

.board-wrapper{position:relative}
.message{margin-top:0.75rem;text-align:center;color:var(--muted);min-height:1.25rem}
.message{font-size:.95rem;padding:0 .25rem}
.board-wrapper{margin-bottom:.5rem}

.share-bar{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin:1rem 0 0}
/* Brand hover hints for social buttons */
#shareX:hover{color:#000}
#shareFB:hover{color:#1877F2}
#shareLI:hover{color:#0A66C2}

.board{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;
  width:min(92vw,520px);
  aspect-ratio:1/1;
  margin:0 auto;
  background:#d6d7db;
  padding:0.75rem;border-radius:16px;
  touch-action:none; /* avoid page scroll during swipes */
  -webkit-user-select:none;user-select:none;
}

.cell{
  display:grid;place-items:center;
  border-radius:12px;
  font-weight:800;
  font-size:clamp(1rem,6vw,2rem);
  line-height:1;
  aspect-ratio:1/1;
  overflow:hidden;
  color:#776e65;
  background:var(--tile-empty);
  transition:transform .06s ease, background .1s ease, filter .1s ease;
  -webkit-user-select:none;user-select:none;
  text-align:center;
}
.cell.pop{animation:pop .12s ease}

@keyframes pop{
  from{transform:scale(0.8);opacity:0.5}
  to{transform:scale(1);opacity:1}
}

/* Tile colors */
.v-2{background:var(--tile-2)}
.v-4{background:var(--tile-4)}
.v-8{background:var(--tile-8)}
.v-16{background:var(--tile-16);color:#fff}
.v-32{background:var(--tile-32);color:#fff}
.v-64{background:var(--tile-64);color:#fff}
.v-128{background:var(--tile-128);color:#fff}
.v-256{background:var(--tile-256);color:#fff}
.v-512{background:var(--tile-512);color:#fff}
.v-1024{background:var(--tile-1024);color:#fff}
.v-2048{background:var(--tile-2048);color:#fff}

.instructions{max-width:900px;margin:1rem auto 0;color:var(--fg);}
.instructions{background:linear-gradient(180deg,#ffffff, #fafafe);border:1px solid #e6e6ef;border-radius:16px;padding:1rem;}
.instructions h2{font-weight:800;font-size:1.1rem;margin:0 0 .5rem}
.instructions h2,.instructions h3{margin:1rem 0 0.25rem}
.instructions p{margin:0.25rem 0 0.5rem;line-height:1.45}

.app-footer{max-width:900px;margin:1rem auto;padding:0 1rem calc(2rem + env(safe-area-inset-bottom));color:var(--muted)}
.app-footer a{color:var(--link);text-decoration:underline}
.app-footer a:hover{filter:brightness(1.05)}
/* Inline icon for links */
.icon-inline{width:14px;height:14px;vertical-align:text-bottom;margin-right:4px;display:inline-block}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (hover:hover){
  .cell:hover{filter:brightness(0.98)}
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1115; --fg:#e7e7ea; --muted:#a0a0a5; --tile-empty:#23252b; }
  :root{ --link:#8ab4ff; }
  .score{background:#171920;border-color:#2a2c35}
  .board{background:#1f2128}
  select, .btn.secondary{background:#171920;color:var(--fg);border-color:#2a2c35}
  .instructions{background:linear-gradient(180deg,#151722, #12141b);border-color:#2a2c35;color:var(--fg)}
  .switch{border-color:#2a2c35;background:linear-gradient(180deg,#151722,#11131a) padding-box, linear-gradient(180deg,#2a2c35,#242632) border-box}
  .switch .slider{background:#2a2c35}
}
html[data-theme="dark"]{ --bg:#0f1115; --fg:#e7e7ea; --muted:#a0a0a5; --tile-empty:#23252b; }
html[data-theme="dark"]{ --link:#8ab4ff; }
html[data-theme="dark"] .score{background:#171920;border-color:#2a2c35}
html[data-theme="dark"] .board{background:#1f2128}
html[data-theme="dark"] select, html[data-theme="dark"] .btn.secondary{background:#171920;color:var(--fg);border-color:#2a2c35}
html[data-theme="dark"] .instructions{background:linear-gradient(180deg,#151722, #12141b);border-color:#2a2c35;color:var(--fg)}
html[data-theme="dark"] .switch{border-color:#2a2c35;background:linear-gradient(180deg,#151722,#11131a) padding-box, linear-gradient(180deg,#2a2c35,#242632) border-box}
html[data-theme="dark"] .switch .slider{background:#2a2c35}

/* Force light theme when explicitly selected, even if system is dark */
html[data-theme="light"]{ --bg:#f6f6f6; --fg:#111; --muted:#666; --tile-empty:#e9e9ec; }
html[data-theme="light"] .score{background:#fff;border-color:#e6e6e9}
html[data-theme="light"] .board{background:#d6d7db}
html[data-theme="light"] select, html[data-theme="light"] .btn.secondary{background:#fff;color:var(--fg);border-color:#ddd}
html[data-theme="light"] .instructions{background:linear-gradient(180deg,#ffffff, #fafafe);border-color:#e6e6ef;color:var(--fg)}
html[data-theme="light"] .switch{border:1px solid #d9d9e0; background:linear-gradient(180deg,#fff,#f7f7fb) padding-box, linear-gradient(180deg,#e3e3ec,#d3d3de) border-box}
html[data-theme="light"] .switch .slider{background:#d6d7db}

/* Small screens: stack header and wrap actions */
@media (max-width: 800px){
  .header-actions{grid-template-columns:repeat(3, 1fr)}
  .header-actions .switch{justify-content:center}
  /* Reorder: row 1 switches, row 2 actions */
  .sw-theme{order:1}
  .act-new{order:2}
  .act-undo{order:3}
  .act-cont{order:4}
  .message{margin-top:1rem;font-size:.9rem;padding:0 .5rem}
  .share-bar{margin-top:1.25rem}
}

/* Very small screens: ensure footer remains readable and tidy */
@media (max-width: 360px){
  .app-footer{padding-left:.75rem;padding-right:.75rem}
  .app-footer small{display:block;font-size:.85rem;line-height:1.4}
  .app-footer a{word-break:break-word}
}