:root {
      --bg: #faf8ef;
      --board: #bbada0;
      --tile-bg: #cdc1b4;
      --text: #776e65;
      --tile-size: 84px;
      --gap: 16px;
      --radius: 8px;
    }

    * {
      box-sizing: border-box
    }

    html, body {
      min-height: 100%;
    }

  
    .top-menu {
      background: rgba(0, 0, 0, 0.2);
      padding: 15px 0;
      width: 100%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .menu-container {
      width: min(1100px, 95vw);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .site-title {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      text-decoration: none;
    }

    .top-menu nav a {
      color: #f0f0f0;
      text-decoration: none;
      margin-left: 25px;
      font-size: 16px;
      transition: color 0.2s ease;
    }

    .top-menu nav a:hover {
      color: #fff;
      text-decoration: underline;
    }

    body {
      font-family: 'Segoe UI', Roboto, Arial;
      background: linear-gradient(#567c03, #012c2f);
      color: #ffffff;
      margin: 0;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      flex-direction: column;
    }

    .container {
      width: min(520px, 95vw);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 30px auto;
      flex-grow: 1;
    }

    header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px
    }

    h1 {
      font-size: 36px;
      margin: 0;
      letter-spacing: -1px
    }

    .scorebox {
      display: flex;
      gap: 10px
    }

    .badge {
      background: #eee;
      padding: 10px 14px;
      border-radius: 6px;
      text-align: center;
      min-width: 60px;
    }


    .badge div {
      color: #333;
    }

    .badge small {
      display: block;
      font-size: 12px;
      color: #999;
    }

    .main-controls {
      width: 100%;
      display: flex;
      gap: 8px;
      margin-bottom: 12px
    }

    .btn {
      background: #8f7a66;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
    }

    .btn:hover {
      opacity: 0.9
    }

    .btn.secondary {
      background: transparent;
      color: #f0f0f0;
      
      border: 1px solid rgba(255, 255, 255, 0.3);
      
    }

    .game {
      background: var(--board);
      padding: var(--gap);
      border-radius: var(--radius);
      position: relative;
      overflow: hidden
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, var(--tile-size));
      grid-auto-rows: var(--tile-size);
      gap: var(--gap);
      justify-content: center
    }

    .cell {
      width: var(--tile-size);
      height: var(--tile-size);
      background: var(--tile-bg);
      border-radius: 6px;
    }

    #tiles {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .tile {
      position: absolute;
      width: var(--tile-size);
      height: var(--tile-size);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-weight: 700;
      font-size: 22px;
      transition: transform 150ms ease;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
      -webkit-user-select: none;
      user-select: none;
      z-index: 10;
    }


    @keyframes spawn-pop {
      0% {
        transform: scale(0);
      }

      80% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
      }
    }

    .spawn-pop {
      animation: spawn-pop 200ms ease;
    }

    @keyframes merge-pop {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.18);
      }

      100% {
        transform: scale(1);
      }
    }

    .merge-pop {
      animation: merge-pop 150ms ease;
    }


    .tile.t2 {
      background: #eee4da;
      color: #776e65
    }

    .tile.t4 {
      background: #ede0c8;
      color: #776e65
    }

    .tile.t8 {
      background: #f2b179;
      color: #f9f6f2
    }

    .tile.t16 {
      background: #f59563;
      color: #f9f6f2
    }

    .tile.t32 {
      background: #f67c5f;
      color: #f9f6f2
    }

    .tile.t64 {
      background: #f65e3b;
      color: #f9f6f2
    }

    .tile.t128 {
      background: #edcf72;
      color: #f9f6f2;
      font-size: 18px
    }

    .tile.t256 {
      background: #edcc61;
      color: #f9f6f2;
      font-size: 18px
    }

    .tile.t512 {
      background: #edc850;
      color: #f9f6f2;
      font-size: 18px
    }

    .tile.t1024 {
      background: #edc53f;
      color: #f9f6f2;
      font-size: 16px
    }

    .tile.t2048 {
      background: #edc22e;
      color: #f9f6f2;
      font-size: 16px
    }

    .tile.super {
      background: #3c3a32;
      color: #fff;
      font-size: 14px
    }

    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      border-radius: var(--radius);
      opacity: 1;
      transition: opacity 300ms ease-in-out;
      z-index: 100;
      text-align: center;
      padding: 24px;
      color: var(--text);
    }

    .overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .small {
      font-size: 14px;
      color: #666
    }

    footer {
      width: 100%;
      padding: 10px 0;
      font-size: 13px;
      color: #cce0ee;
      text-align: center;
      margin-top: 20px;
    }

    
    .arrow-controls {
      display: grid;
      justify-content: center; 
      
      grid-template-columns: 64px 64px 64px;
      grid-template-rows: 64px 64px;
      gap: 10px;
      margin-top: 20px;
    }

    .arrow-btn {
      background: #9f8b77;
      border: none;
      width: 64px;
      height: 64px;
      border-radius: 8px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 80ms ease;
    }

    
    .arrow-btn::before {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
    }

    #upBtn::before {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 14px solid white;
    }
    
    #downBtn::before {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 14px solid white;
    }

    #leftBtn::before {
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 14px solid white;
    }

    #rightBtn::before {
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 14px solid white;
    }
    
    .arrow-btn:hover {
      opacity: 0.95;
    }

    .arrow-btn:active {
      transform: translateY(2px) scale(0.98);
    }

    
    #upBtn {
      grid-row: 1;
      grid-column: 2;
    }

    #leftBtn {
      grid-row: 2;
      grid-column: 1;
    }

    #downBtn {
      grid-row: 2;
      grid-column: 2;
    }

    #rightBtn {
      grid-row: 2;
      grid-column: 3;
    }
    


    .sound-controls {
      margin-top: 8px;
      display: flex;
      gap: 8px;
      align-items: center;
    }


    .overlay.win-animate h2 {
      animation: pop 700ms ease forwards;
    }

    @keyframes pop {
      0% {
        transform: scale(.88);
        opacity: 0
      }

      60% {
        transform: scale(1.05);
        opacity: 1
      }

      100% {
        transform: scale(1);
      }
    }

    .confetti {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
      z-index: 110;
    }

    .confetti .p {
      position: absolute;
      width: 9px;
      height: 14px;
      border-radius: 2px;
      transform-origin: center;
      animation: fall 1200ms linear forwards;
      opacity: 0.95;
    }

    @keyframes fall {
      0% {
        transform: translateY(-10vh) rotate(0deg) scale(1);
        opacity: 1
      }

      100% {
        transform: translateY(110vh) rotate(720deg) scale(0.9);
        opacity: 0.95
      }
    }

    .how-to {
      width: 100%;
      padding: 10px 20px;
      margin-top: 30px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: var(--radius);
      color: #cce0ee;
      text-align: left;
    }

    .how-to h2, .how-to h3 {
      text-align: center;
      color: #fff;
      margin-top: 5px;
    }

    .how-to h3 {
      margin-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 15px;
    }

    .how-to p, .how-to li {
      font-size: 15px;
      line-height: 1.6;
    }

    .how-to ul {
      padding-left: 20px;
      list-style-type: disc;
    }

    .how-to li {
      margin-bottom: 10px;
    }

    .links-container {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
    .links-container a {
        color: #f0f0f0;
        text-decoration: none;
        font-weight: 600;
    }
    .links-container a:hover {
        text-decoration: underline;
    }

    @media (max-width:420px) {
      :root {
        --tile-size: 64px;
        --gap: 12px
      }

      h1 {
        font-size: 28px
      }

      .arrow-controls {
        grid-template-columns: 48px 48px 48px;
        grid-template-rows: 48px 48px;
        gap: 8px;
      }
      
      .arrow-btn {
        width: 48px;
        height: 48px;
      }

      /* Resized CSS arrows for mobile */
      #upBtn::before {
        border-left-width: 8px;
        border-right-width: 8px;
        border-bottom-width: 11px;
      }
      
      #downBtn::before {
        border-left-width: 8px;
        border-right-width: 8px;
        border-top-width: 11px;
      }

      #leftBtn::before {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-right-width: 11px;
      }

      #rightBtn::before {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 11px;
      }
    }