/* 2048: the home screen, the bar and the board. A warm sunset ramp of our own:
   sand, apricot, coral, rose, plum, indigo, then a sun for the goal. */
:root{
  --board:#8A5A44;--cell:rgba(255,236,214,.17);
  --t2:#FFF3E0;--t4:#FFE2BE;--t8:#F7B267;--t16:#F4845F;--t32:#F25C54;--t64:#E0435A;
  --t128:#C2477E;--t256:#9B4A9A;--t512:#6F4BAE;--t1024:#3F6CB8;--t2048:#F7C548;--tbig:#2F2A3A;
}
body{background:radial-gradient(120% 90% at 50% 0%,#FFF8EE,var(--paper) 55%,#F6E6D2)}

/* ---------------------------------------------------------------- home */
.home{align-items:center;justify-content:center;gap:clamp(.6em,3vh,1.4em);padding:1em;text-align:center}
.logo{display:flex;gap:.12em;justify-content:center;margin:0;font:900 clamp(2.4em,min(14vw,11vh),4.6em)/1 var(--round)}
.logo span{display:grid;place-items:center;width:1.15em;height:1.15em;border-radius:.18em;color:#fff;box-shadow:0 .06em 0 rgba(0,0,0,.12)}
.logo span:nth-child(1){background:var(--t8)}
.logo span:nth-child(2){background:var(--t32)}
.logo span:nth-child(3){background:var(--t128)}
.logo span:nth-child(4){background:var(--t512)}
.sub{margin:.5em 0 0;font:900 1.15em/1 var(--round);letter-spacing:.32em;text-transform:uppercase;color:var(--t128)}
.tagline{margin:.5em 0 0;color:var(--ink-soft);font-size:1.05em}
.setup{display:flex;flex-direction:column;align-items:center;gap:clamp(.4em,1.8vh,.8em)}
.setup .choice{min-width:6.4em}
.go{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap;font-size:.92em}
@media (max-height:500px) and (min-aspect-ratio:5/4){
  .home{flex-direction:row;gap:2em}
  .home .brand{max-width:40%}
  .logo{font-size:clamp(2em,10vh,3.6em)}
}
@media (max-height:420px){
  .setup .choice{padding:.3em .7em}
  .pill{padding:.55em 1.8em}
  .links .link{min-height:40px;padding:.2em .5em}
  .tagline{font-size:.92em}
}

/* ---------------------------------------------------------------- game */
#game{display:grid;grid-template:"bar" auto "felt" 1fr "goal" auto / 1fr;touch-action:none;user-select:none;-webkit-user-select:none}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:center;gap:.6em;padding:max(.6em,env(safe-area-inset-top)) .8em .3em}
.box{position:relative;min-width:5.2em;padding:.3em .8em;border-radius:.7em;background:var(--board);color:#fff;text-align:center;line-height:1.05}
.box small{display:block;font-size:.66em;letter-spacing:.12em;text-transform:uppercase;color:#F7DCC6}
.box b{font:900 1.3em/1.1 var(--round)}
#gain{position:absolute;left:0;right:0;top:-.2em;font:900 1em var(--round);color:var(--accent);font-style:normal;opacity:0;pointer-events:none}
#gain.go{animation:gain .7s ease-out}
@keyframes gain{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-1.6em)}}
.badge{position:absolute;right:-4px;top:-4px;min-width:1.35em;height:1.35em;border-radius:999px;background:var(--accent);color:#fff;font:800 .72em/1.35em var(--sans);padding:0 .3em}
.felt{grid-area:felt;position:relative;min-height:0;min-width:0}
.goal{grid-area:goal;margin:0;padding:.2em .8em max(.6em,env(safe-area-inset-bottom));text-align:center;color:var(--ink-soft);font-size:.9em}
@media (min-aspect-ratio:5/4) and (max-height:600px){
  #game{grid-template:"bar felt" 1fr "goal felt" auto / auto 1fr}
  .bar{flex-direction:column;padding:.8em .2em .8em max(.8em,env(safe-area-inset-left))}
  .goal{padding:0 .2em max(.8em,env(safe-area-inset-bottom)) max(.8em,env(safe-area-inset-left));max-width:9em}
}

.board{position:absolute;left:50%;top:50%;width:var(--side);height:var(--side);transform:translate(-50%,-50%);border-radius:calc(var(--side)*.035);background:var(--board);
  box-shadow:0 calc(var(--side)*.015) 0 #6d4532,0 calc(var(--side)*.04) calc(var(--side)*.08) rgba(90,50,30,.25)}
.cells,.tiles{position:absolute;inset:0}
.cells i{position:absolute;width:var(--cell);height:var(--cell);border-radius:calc(var(--cell)*.12);background:var(--cell-bg,rgba(255,236,214,.17))}
.tile{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);transition:transform 100ms ease-out;will-change:transform}
.tile.now{transition:none}
.face{width:100%;height:100%;border-radius:calc(var(--cell)*.12);display:grid;place-items:center;font:900 var(--fs,1em)/1 var(--round);color:#fff;letter-spacing:-.02em;
  background:var(--tbig);box-shadow:inset 0 calc(var(--cell)*-.05) 0 rgba(0,0,0,.12)}
.tile[data-v="2"] .face{background:var(--t2);color:#7A4A30}
.tile[data-v="4"] .face{background:var(--t4);color:#7A4A30}
.tile[data-v="8"] .face{background:var(--t8)}
.tile[data-v="16"] .face{background:var(--t16)}
.tile[data-v="32"] .face{background:var(--t32)}
.tile[data-v="64"] .face{background:var(--t64)}
.tile[data-v="128"] .face{background:var(--t128);box-shadow:0 0 calc(var(--cell)*.12) rgba(194,71,126,.35)}
.tile[data-v="256"] .face{background:var(--t256);box-shadow:0 0 calc(var(--cell)*.14) rgba(155,74,154,.4)}
.tile[data-v="512"] .face{background:var(--t512);box-shadow:0 0 calc(var(--cell)*.16) rgba(111,75,174,.45)}
.tile[data-v="1024"] .face{background:var(--t1024);box-shadow:0 0 calc(var(--cell)*.18) rgba(63,108,184,.5)}
.tile[data-v="2048"] .face{background:var(--t2048);color:#5B3A12;box-shadow:0 0 calc(var(--cell)*.3) rgba(247,197,72,.75)}
.tile.new .face{animation:appear 160ms ease-out 90ms backwards}
.tile.pop .face{animation:pop 180ms ease-out 90ms backwards}
.tile.goner{z-index:0}
.tile:not(.goner){z-index:1}
@keyframes appear{from{transform:scale(0);opacity:0}}
@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.board.bump{animation:bump .18s}
@keyframes bump{30%{transform:translate(calc(-50% + var(--bx,0px)),calc(-50% + var(--by,0px)))}}
#burst{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}

/* cards: the big number on a result card */
.card .big{font:900 2.4em/1 var(--round);text-align:center;color:var(--ink);margin:.1em 0 .2em}
.card .howto{display:flex;flex-direction:column;gap:.5em;margin:0;padding:0;list-style:none}
.card .howto li{display:flex;gap:.6em;align-items:center}
.card .howto .mini{flex:none;width:2.2em;height:2.2em;border-radius:.4em;display:grid;place-items:center;font:900 .85em var(--round);color:#fff}
@media (min-aspect-ratio:5/4) and (max-height:600px){
  #gain{left:100%;right:auto;top:.3em;padding-left:.3em;white-space:nowrap}
}
/* a short screen: the result card's buttons sit side by side */
@media (max-height:500px){
  .card{padding:.8em 1em .7em}
  .card h2{font-size:1.3em;margin-bottom:.3em}
  .card .big{font-size:1.9em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .card .actions .pill{padding:.55em 1.4em}
}