:root {
      --bg-top: #eafff2;
      --bg-bottom: #b8ecc9;
      --ink: #204034;
      --ink-soft: #4d6a5d;
      --card: #ffffff;
      --line: #2b3a34;

      --n1: #4fa9ab;
      /* teal */
      --n1-dk: #3a8688;
      --n2: #f0b84c;
      /* amber */
      --n2-dk: #d99a2b;
      --n3: #f2a0c4;
      /* pink */
      --n3-dk: #dd7fa9;
      --n4: #f0705f;
      /* coral */
      --n4-dk: #d94f3d;
      --n5: #8fc76b;
      /* sage */
      --n5-dk: #6ea849;

      --pos: #4fa9ab;
      --neg: #f0705f;

      --shadow: 0 6px 0 rgba(0, 0, 0, .14);
  }

  * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
  }

  html,
  body {
      height: 100%;
  }

  body {
      margin: 0;
      min-height: 100vh;
      font-family: 'Nunito', sans-serif;
      background: radial-gradient(circle at 50% 0%, var(--bg-top), var(--bg-bottom) 75%);
      color: var(--ink);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow-x: hidden;
      user-select: none;
      -webkit-user-select: none;
  }

  .stage {
      width: 100%;
      max-width: 460px;
      min-height: 100vh;
      padding: 5px 16px 28px;
      position: relative;
      display: flex;
      flex-direction: column;
  }

  /* ---------- PRELOADER ---------- */
  #preloader {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: radial-gradient(circle at 50% 35%, #d6ffe6, #93dcaf 80%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity .6s ease, visibility .6s ease;
  }

  #preloader.hide {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
  }

  .loader-badges {
      display: flex;
      gap: 10px;
      margin-bottom: 26px;
  }

  .loader-badge {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 22px;
      color: #fff;
      box-shadow: var(--shadow);
      animation: badgeBounce 1.1s ease-in-out infinite;
  }

  .loader-badge:nth-child(1) {
      background: var(--n3);
      animation-delay: 0s;
  }

  .loader-badge:nth-child(2) {
      background: var(--n2);
      animation-delay: .12s;
  }

  .loader-badge:nth-child(3) {
      background: var(--n5);
      animation-delay: .24s;
  }

  .loader-badge:nth-child(4) {
      background: var(--n4);
      animation-delay: .36s;
  }

  .loader-badge:nth-child(5) {
      background: var(--n1);
      animation-delay: .48s;
  }

  @keyframes badgeBounce {

      0%,
      60%,
      100% {
          transform: translateY(0);
      }

      30% {
          transform: translateY(-16px);
      }
  }

  .loader-title {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 26px;
      color: var(--ink);
      letter-spacing: .5px;
      margin-bottom: 6px;
  }

  .loader-sub {
      font-size: 13px;
      color: var(--ink-soft);
      margin-bottom: 22px;
      font-weight: 700;
  }

  .loader-track {
      width: 200px;
      height: 10px;
      border-radius: 999px;
      background: rgba(32, 64, 52, .15);
      overflow: hidden;
  }

  .loader-fill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--n1), var(--n5));
      transition: width .18s ease;
  }

  /* ---------- HEADER ---------- */
  header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
  }

  .brand {
      display: flex;
      flex-direction: column;
  }

  .brand-name {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
  }

  .brand-name .dot {
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background: var(--n4);
      box-shadow: 2px 2px 0 var(--n4-dk);
      transform: rotate(6deg);
  }

  .brand-tag {
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-soft);
      letter-spacing: .4px;
      margin-left: 20px;
  }

  .icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: none;
      background: #fff;
      box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 17px;
      color: var(--ink);
      transition: transform .12s ease;
  }

  .icon-btn:active {
      transform: translateY(2px);
      box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
  }

  .header-actions {
      display: flex;
      gap: 8px;
  }

  .score-card {
      background: var(--card);
      border-radius: 18px;
      padding: 5px 18px;
      text-align: center;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
  }

  .score-value.bump {
      transform: scale(1.18);
      color: var(--n5-dk);
  }

  .best-row {
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-soft);
      margin-top: 2px;
  }

  .score-fx {
      position: fixed;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      color: var(--n5-dk);
      font-size: 16px;
      pointer-events: none;
      animation: floatUp .9s ease forwards;
  }

  @keyframes floatUp {
      0% {
          opacity: 1;
          transform: translateY(0) scale(.8);
      }

      100% {
          opacity: 0;
          transform: translateY(-40px) scale(1.15);
      }
  }

  .score-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 18px;
  }

  .score-label,
  .score-value,
  .best-row {
      margin: 0;
      white-space: nowrap;
  }

  .score-value {
      font-size: 1.5rem;
      font-weight: 700;
  }

  /* ---------- GRID ---------- */
  .grid-wrap {
      background: rgba(255, 255, 255, .35);
      border-radius: 24px;
      padding: 12px;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
      margin-bottom: 20px;
  }

  .grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
  }

  .tile {
      position: relative;
      aspect-ratio: 1/1;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: clamp(20px, 6vw, 28px);
      color: #fff;
      box-shadow: var(--shadow);
      transition: background .18s ease, transform .12s ease;
      cursor: pointer;
      will-change: transform;
  }

  .tile::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
      pointer-events: none;
  }

  .tile.n1 {
      background: var(--n1);
      box-shadow: 0 6px 0 var(--n1-dk);
  }

  .tile.n2 {
      background: var(--n2);
      box-shadow: 0 6px 0 var(--n2-dk);
  }

  .tile.n3 {
      background: var(--n3);
      box-shadow: 0 6px 0 var(--n3-dk);
  }

  .tile.n4 {
      background: var(--n4);
      box-shadow: 0 6px 0 var(--n4-dk);
  }

  .tile.n5 {
      background: var(--n5);
      box-shadow: 0 6px 0 var(--n5-dk);
  }

  .tile.dropready {
      transform: scale(1.08);
      filter: brightness(1.1);
  }

  .tile.pulse {
      animation: pulseTile .32s ease;
  }

  @keyframes pulseTile {
      0% {
          transform: scale(1);
      }

      40% {
          transform: scale(1.22);
      }

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

  .tile.clearing {
      animation: clearTile .38s ease forwards;
  }

  @keyframes clearTile {
      0% {
          transform: scale(1) rotate(0);
          opacity: 1;
      }

      60% {
          transform: scale(1.25) rotate(8deg);
          opacity: .8;
      }

      100% {
          transform: scale(0) rotate(20deg);
          opacity: 0;
      }
  }

  .tile.popin {
      animation: popIn .34s cubic-bezier(.34, 1.56, .64, 1);
  }

  @keyframes popIn {
      0% {
          transform: scale(0);
          opacity: 0;
      }

      70% {
          transform: scale(1.12);
          opacity: 1;
      }

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

  .tile.shakeit {
      animation: shakeTile .32s ease;
  }

  @keyframes shakeTile {

      0%,
      100% {
          transform: translateX(0);
      }

      25% {
          transform: translateX(-5px) rotate(-2deg);
      }

      75% {
          transform: translateX(5px) rotate(2deg);
      }
  }

  /* ---------- TRAY ---------- */
  .tray-section {
    
  }

  .tray-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
  }

  .tray-heading span {
      font-size: 12px;
      font-weight: 800;
      color: var(--ink-soft);
      letter-spacing: 1px;
  }

  .chip-count {
      background: #fff;
      border-radius: 999px;
      padding: 2px 10px;
      font-size: 11px;
      font-weight: 800;
      color: var(--ink);
      box-shadow: 0 2px 0 rgba(0, 0, 0, .1);
  }

  .tray {
      position: relative;
      background: rgba(255, 255, 255, .35);
      border-radius: 20px;
      padding: 12px 14px;
      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
      min-height: 82px;
  }

  .tray-line {
      position: absolute;
      left: 16px;
      right: 16px;
      top: 50%;
      height: 3px;
      transform: translateY(-50%);
      background-image: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 14px);
      opacity: .55;
      border-radius: 2px;
  }

  .tray-track {
      position: relative;
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 2px 4px;
      scrollbar-width: none;
      justify-content: flex-end;
  }

  .tray-track::-webkit-scrollbar {
      display: none;
  }

  .chip {
      flex: 0 0 auto;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 17px;
      color: #fff;
      cursor: grab;
      position: relative;
      z-index: 2;
      box-shadow: 0 5px 0 rgba(0, 0, 0, .16);
      touch-action: none;
      transition: transform .15s ease;
  }

  .chip.pos {
      background: var(--pos);
  }

  .chip.neg {
      background: var(--neg);
  }

  .chip.dragging {
      position: fixed;
      z-index: 500;
      pointer-events: none;
      box-shadow: 0 10px 18px rgba(0, 0, 0, .25);
      transform: scale(1.15);
  }

  .chip.newchip {
      animation: chipEnter .4s cubic-bezier(.34, 1.56, .64, 1);
  }

  @keyframes chipEnter {
      0% {
          transform: translateX(-26px) scale(.3);
          opacity: 0;
      }

      70% {
          transform: translateX(2px) scale(1.1);
          opacity: 1;
      }

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

  .chip.usedfade {
      animation: chipUsed .28s ease forwards;
  }

  @keyframes chipUsed {
      to {
          opacity: 0;
          transform: scale(.3);
      }
  }

  .tray-empty-msg {
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-soft);
      text-align: center;
      padding: 10px 0;
      flex: 1 1 auto;
      width: 100%;
  }

  /* ---------- MODALS ---------- */
  .overlay {
      position: fixed;
      inset: 0;
      background: rgba(20, 40, 32, .55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 600;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
  }

  .overlay.show {
      opacity: 1;
      pointer-events: auto;
  }

  .modal {
      background: #fff;
      border-radius: 24px;
      padding: 26px 24px 24px;
      max-width: 380px;
      width: 100%;
      box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
      transform: translateY(16px) scale(.96);
      transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
      max-height: 86vh;
      overflow-y: auto;
  }

  .overlay.show .modal {
      transform: translateY(0) scale(1);
  }

  .modal h2 {
      font-family: 'Baloo 2', sans-serif;
      font-size: 24px;
      margin: 0 0 4px;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .modal p {
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-soft);
      margin: 8px 0;
  }

  .htp-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 14px 0;
      background: #f4fbf6;
      border-radius: 14px;
      padding: 10px 12px;
  }

  .htp-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      flex: 0 0 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 30px;
      color: #4fa9ab;
  }

  .htp-row:nth-child(1) .htp-icon {
      background: var(--n1);
  }

  .htp-row:nth-child(2) .htp-icon {
      background: var(--n3);
  }

  .htp-row:nth-child(3) .htp-icon {
      background: var(--n5);
  }

  .htp-row p {
      margin: 0;
      font-size: 13px;
  }

  .htp-row strong {
      color: var(--ink);
  }

  .modal-btn {
      width: 100%;
      border: none;
      border-radius: 14px;
      padding: 14px;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #fff;
      background: var(--n1);
      box-shadow: 0 5px 0 var(--n1-dk);
      cursor: pointer;
      margin-top: 8px;
      transition: transform .12s ease;
  }

  .modal-btn:active {
      transform: translateY(3px);
      box-shadow: 0 2px 0 var(--n1-dk);
  }

  .modal-btn.secondary {
      background: #eef6f0;
      color: var(--ink);
      box-shadow: 0 5px 0 #d7e6da;
      margin-top: 10px;
  }

  .close-x {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 18px;
      color: var(--ink-soft);
      cursor: pointer;
  }

  .modal {
      position: relative;
  }

  .go-emoji {
      font-size: 46px;
      text-align: center;
      margin-bottom: 4px;
  }

  .go-score {
      text-align: center;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 40px;
      margin: 6px 0 0;
  }

  .go-best {
      text-align: center;
      font-size: 13px;
      color: var(--ink-soft);
      font-weight: 700;
      margin-bottom: 6px;
  }

  footer.hint {
      text-align: center;
      font-size: 11px;
      color: var(--ink-soft);
      font-weight: 700;
      margin-top: 14px;
      opacity: .75;
  }

  .toast {
      position: fixed;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%) translateY(10px);
      background: var(--ink);
      color: #fff;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transition: all .25s ease;
      z-index: 700;
      pointer-events: none;
  }

  .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
      * {
          animation-duration: .001s !important;
          transition-duration: .001s !important;
      }
  }