:root {
      --ink: #24313d;
      --blue: #1fa8f3;
      --blue2: #0874c9;
      --cream: #fffaf0;
      --green: #18d977;
      --yellow: #ffbd21;
      --red: #ff526a;
      --purple: #9d5cff;
      --gap: 7px;
    }

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

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden
    }

    body {
      font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
      color: var(--ink);
      background: #f7fbff;
      touch-action: none;
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      isolation: isolate
    }

    body > * {
      position: relative;
      z-index: 1
    }

    button {
      font: inherit;
      color: inherit
    }

    button:focus-visible {
      outline: 4px solid white;
      outline-offset: 3px
    }

    .app {
      width: min(100vw, 500px);
      height: min(100dvh, 900px);
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, .34) 0 3%, transparent 4%),
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .22) 0 3%, transparent 4%),
        linear-gradient(160deg, #55cfff, #168fe0 72%);
      border: clamp(0px, 1.2vw, 7px) solid var(--ink);
      border-radius: clamp(0px, 5vw, 30px);
      box-shadow: 0 18px 45px rgba(0, 0, 0, .34)
    }

    /* Freeze game UI while fullscreen/reward ads are up (iOS safe) */
    html.ad-showing .app {
      pointer-events: none
    }

    html.ad-showing body {
      overflow: hidden
    }

    @media (max-width: 500px) {
      .app {
        left: 0;
        top: 0;
        transform: none;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none
      }
    }

    .screen {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: none;
      flex-direction: column;
      align-items: center;
      padding: 18px;
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none
    }

    .screen::-webkit-scrollbar {
      display: none
    }

    .screen.active {
      display: flex
    }

    #home-screen {
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 91, 171, .22))
    }

    .home-settings {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 5;
      width: 46px;
      height: 46px;
      border: 3px solid var(--ink);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 4px 0 var(--ink);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      padding: 0
    }

    .home-settings:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 var(--ink)
    }

    .brand {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 15px
    }

    .logo-stack {
      position: relative;
      width: 310px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .logo-face {
      position: absolute;
      width: 150px;
      height: 200px;
      border: 5px solid var(--ink);
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 8px 0 var(--ink), 0 14px 25px rgba(0, 0, 0, .2);
      background: white
    }

    .logo-face img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .logo-face:nth-child(1) {
      left: 17px;
      transform: rotate(-10deg) scale(.86)
    }

    .logo-face:nth-child(2) {
      z-index: 2;
      transform: translateY(-12px)
    }

    .logo-face:nth-child(3) {
      right: 17px;
      transform: rotate(10deg) scale(.86)
    }

    .title {
      font-size: clamp(38px, 11vw, 58px);
      line-height: .9;
      color: #fff;
      text-align: center;
      letter-spacing: -2px;
      text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 8px 0 var(--ink)
    }

    .subtitle {
      margin-top: 16px;
      background: #fff;
      border: 3px solid var(--ink);
      border-radius: 999px;
      padding: 7px 15px;
      font-weight: 900;
      font-size: 12px;
      box-shadow: 0 4px 0 var(--ink)
    }

    .menu {
      width: 100%;
      display: grid;
      gap: 12px;
      padding: 0 4px 15px
    }

    .btn {
      min-height: 50px;
      border: 4px solid var(--ink);
      border-radius: 17px;
      background: var(--yellow);
      box-shadow: 0 6px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .45);
      font-weight: 1000;
      font-size: 17px;
      cursor: pointer;
      text-transform: uppercase;
      transition: .09s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px
    }

    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 var(--ink)
    }

    .btn.green {
      background: var(--green)
    }

    .btn.blue {
      background: #43c3ff
    }

    .btn.purple {
      background: var(--purple);
      color: #fff
    }

    .btn.red {
      background: var(--red);
      color: #fff
    }

    .btn.white {
      background: #fff
    }

    .btn.small {
      min-height: 38px;
      padding: 5px 12px;
      font-size: 12px;
      border-width: 3px;
      border-radius: 13px;
      box-shadow: 0 4px 0 var(--ink)
    }

    .menu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .menu-grid .btn {
      font-size: 13px
    }

    .topline {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px
    }

    .screen-title {
      font-size: 27px;
      color: var(--ink);
      text-align: center;
      text-shadow: 0 3px 0 rgba(31, 168, 243, .25);
      letter-spacing: .5px
    }

    .level-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding-bottom: 20px
    }

    .level-card {
      min-height: 128px;
      border: 4px solid var(--ink);
      border-radius: 19px;
      background: #fff;
      box-shadow: 0 6px 0 var(--ink);
      padding: 9px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-weight: 900;
      cursor: pointer
    }

    .level-card:active {
      transform: translateY(3px);
      box-shadow: 0 3px 0 var(--ink)
    }

    .level-card.locked {
      filter: grayscale(.8);
      opacity: .72;
      cursor: not-allowed
    }

    .level-face {
      width: 62px;
      height: 62px;
      border: 3px solid var(--ink);
      border-radius: 14px;
      overflow: hidden;
      background: #eaf7ff
    }

    .level-face img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .level-num {
      font-size: 12px;
      color: #64727b
    }

    .level-name {
      font-size: 11px;
      text-align: center
    }

    .stars {
      font-size: 14px;
      color: #ffb400;
      letter-spacing: 1px
    }

    /* game */
    #game-screen {
      padding: 11px 13px 12px;
      overflow: hidden
    }

    .hud {
      width: 100%;
      display: grid;
      grid-template-columns: 46px repeat(3, 1fr);
      gap: 7px;
      margin-bottom: 7px
    }

    .stat,
    .icon-btn {
      height: 48px;
      background: rgba(255, 255, 255, .94);
      border: 3px solid var(--ink);
      border-radius: 13px;
      box-shadow: 0 4px 0 var(--ink);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center
    }

    .stat span {
      font-size: 8px;
      font-weight: 1000;
      color: #6c7981
    }

    .stat strong {
      font-size: 14px
    }

    .icon-btn {
      cursor: pointer;
      font-size: 20px;
      background: #ff6475
    }

    .goal-card {
      width: 100%;
      background: linear-gradient(180deg, #eafff4, #d2f7e3);
      border: 3px solid #187c4c;
      border-radius: 16px;
      box-shadow: 0 4px 0 #187c4c;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 7px
    }

    .goal-card.hidden {
      display: none
    }

    .panel-label {
      display: block;
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: .5px;
      margin-bottom: 2px
    }

    .goal-avatar {
      width: 52px;
      height: 52px;
      border: 3px solid #187c4c;
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      flex: 0 0 auto;
      box-shadow: 0 3px 0 rgba(15, 90, 55, .35)
    }

    .goal-avatar img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .goal-copy {
      flex: 1;
      min-width: 0
    }

    .goal-copy .panel-label {
      color: #0f5f38;
      background: #fff59d;
      border: 2px solid #187c4c;
      border-radius: 999px;
      display: inline-block;
      padding: 1px 10px;
      margin-bottom: 4px
    }

    .goal-copy strong {
      display: block;
      font-size: 16px;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .goal-hint {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      font-weight: 800;
      color: #17804e
    }

    .queue-card {
      width: 100%;
      background: rgba(255, 255, 255, .96);
      border: 3px solid var(--ink);
      border-radius: 16px;
      box-shadow: 0 4px 0 var(--ink);
      padding: 8px 10px;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .drop-now {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0
    }

    .current-preview {
      width: 56px;
      height: 56px;
      border: 3px solid var(--ink);
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
      flex: 0 0 auto
    }

    .current-preview img,
    .queue-mini img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .drop-copy {
      min-width: 0
    }

    .drop-copy .panel-label {
      color: #c56e00
    }

    .drop-copy strong {
      display: block;
      font-size: 14px;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .queue-divider {
      width: 3px;
      align-self: stretch;
      border-radius: 4px;
      background: rgba(36, 49, 61, .18);
      flex: 0 0 auto
    }

    .drop-next {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }

    .drop-next .panel-label {
      color: #1f6fa3;
      margin-bottom: 4px
    }

    .next-strip {
      display: flex;
      gap: 6px;
      align-items: center
    }

    .queue-mini {
      position: relative;
      width: 40px;
      height: 40px;
      border: 2px solid var(--ink);
      border-radius: 11px;
      overflow: hidden;
      background: #fff;
      flex: 0 0 auto;
      box-shadow: 0 2px 0 rgba(0, 0, 0, .14)
    }

    .queue-mini em {
      position: absolute;
      top: 1px;
      left: 2px;
      z-index: 1;
      font-style: normal;
      font-size: 9px;
      font-weight: 1000;
      color: #fff;
      background: var(--ink);
      border-radius: 4px;
      padding: 0 3px;
      line-height: 1.3
    }

    .board-shell {
      position: relative;
      width: 100%;
      flex: 1;
      min-height: 285px;
      max-height: 560px;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .board-wrap {
      position: relative;
      height: 100%;
      max-height: 100%;
      aspect-ratio: 5/7;
      max-width: 100%;
      border: 6px solid var(--ink);
      border-radius: 21px;
      background: #283640;
      box-shadow: 0 7px 0 var(--ink), inset 0 3px 0 rgba(255, 255, 255, .08);
      overflow: visible
    }

    .board-inner {
      position: absolute;
      inset: 7px
    }

    .board-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(7, 1fr);
      gap: var(--gap)
    }

    .cell {
      border-radius: 11px;
      background: #3a4a55;
      border: 2px solid #455864;
      box-shadow: inset 0 3px 7px rgba(0, 0, 0, .23)
    }

    .tile-layer,
    .column-layer {
      position: absolute;
      inset: 0
    }

    .column-layer {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      z-index: 30
    }

    .column-hit {
      border: 0;
      background: transparent;
      cursor: pointer;
      position: relative
    }

    .column-hit.bad {
      animation: shake .3s
    }

    .tile {
      position: absolute;
      border: 3px solid var(--ink);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 4px 0 var(--ink), inset 0 -5px 0 rgba(0, 0, 0, .13), inset 0 3px 0 rgba(255, 255, 255, .55);
      transition: left .22s cubic-bezier(.2, .8, .2, 1), top .28s cubic-bezier(.2, .75, .18, 1), transform .18s, opacity .18s;
      z-index: 10
    }

    .tile img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .12))
    }

    .tile.drop {
      transition: top .38s cubic-bezier(.22, .85, .28, 1.18)
    }

    .tile.merge {
      animation: mergePop .42s ease
    }

    .tile.new-unlock::after {
      content: "NEW";
      position: absolute;
      right: 3px;
      top: 3px;
      background: #ffce22;
      border: 2px solid var(--ink);
      border-radius: 999px;
      padding: 1px 4px;
      font-size: 7px;
      font-weight: 1000
    }

    .board-lock {
      position: absolute;
      inset: 0;
      z-index: 40;
      pointer-events: none;
      display: none;
      align-items: center;
      justify-content: center
    }

    .board-lock.active {
      display: flex
    }

    .board-lock span {
      background: rgba(36, 49, 61, .93);
      color: #fff;
      border: 3px solid #fff;
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 10px;
      font-weight: 1000
    }

    .merge-label {
      position: absolute;
      z-index: 70;
      pointer-events: none;
      color: #fff;
      font-weight: 1000;
      font-size: 12px;
      text-align: center;
      text-shadow: 2px 2px 0 var(--ink), -2px -2px 0 var(--ink);
      animation: floatUp .8s ease forwards;
      white-space: nowrap
    }

    .game-actions {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 16px
    }

    .game-actions .btn {
      min-height: 40px;
      font-size: 12px
    }

    /* collection */
    .collection-info {
      width: 100%;
      background: #fff;
      border: 3px solid var(--ink);
      border-radius: 14px;
      box-shadow: 0 4px 0 var(--ink);
      padding: 9px 12px;
      font-weight: 900;
      font-size: 12px;
      margin-bottom: 12px
    }

    .collection-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding-bottom: 18px
    }

    .collect-card {
      background: #fff;
      border: 4px solid var(--ink);
      border-radius: 19px;
      box-shadow: 0 6px 0 var(--ink);
      padding: 10px;
      text-align: center;
      position: relative
    }

    .collect-card.locked {
      filter: grayscale(1);
      opacity: .58
    }

    .collect-img {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(145deg, #eaf8ff, #dceaf2)
    }

    .collect-img img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .collect-name {
      font-size: 12px;
      font-weight: 1000;
      margin-top: 5px
    }

    .collect-rarity {
      font-size: 9px;
      font-weight: 900;
      color: #6c7880
    }

    .lock-badge {
      position: absolute;
      inset: 10px 10px auto auto;
      background: var(--ink);
      color: #fff;
      border-radius: 999px;
      padding: 4px 7px;
      font-size: 10px
    }

    /* modal */
    .modal {
      position: absolute;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(29, 40, 49, .82);
      opacity: 0;
      pointer-events: none;
      transition: .2s;
      padding: 20px
    }

    .modal.active {
      opacity: 1;
      pointer-events: auto
    }

    .modal-card {
      width: 100%;
      max-width: 390px;
      background: #fff;
      border: 6px solid var(--ink);
      border-radius: 25px;
      box-shadow: 0 12px 0 var(--ink), 0 25px 45px rgba(0, 0, 0, .3);
      padding: 21px;
      text-align: center;
      transform: scale(.87);
      transition: .22s
    }

    .modal.active .modal-card {
      transform: scale(1)
    }

    .modal-title {
      font-size: 28px;
      color: var(--ink);
      text-shadow: 0 3px 0 rgba(31, 168, 243, .25);
      margin-bottom: 12px;
      letter-spacing: .5px
    }

    .modal-card p {
      font-weight: 900;
      color: #64717a;
      line-height: 1.4
    }

    .modal-buttons {
      display: grid;
      gap: 10px;
      margin-top: 17px
    }

    .how-list {
      display: grid;
      gap: 10px;
      text-align: left;
      margin-top: 14px
    }

    .how-row {
      display: flex;
      align-items: center;
      gap: 9px;
      background: #ecf8ff;
      border: 3px solid var(--ink);
      border-radius: 14px;
      padding: 9px;
      font-size: 12px;
      font-weight: 900
    }

    .result-face {
      width: 130px;
      height: 130px;
      margin: 8px auto;
      border: 5px solid var(--ink);
      border-radius: 24px;
      background: #eaf8ff;
      overflow: hidden;
      box-shadow: 0 7px 0 var(--ink)
    }

    .result-face img {
      width: 100%;
      height: 100%;
      object-fit: contain
    }

    .unlock-banner {
      position: absolute;
      left: 50%;
      top: 108px;
      z-index: 80;
      transform: translate(-50%, -25px);
      opacity: 0;
      pointer-events: none;
      width: 88%;
      background: linear-gradient(135deg, #ffdc3b, #ff9d1d);
      border: 4px solid var(--ink);
      border-radius: 18px;
      box-shadow: 0 6px 0 var(--ink);
      padding: 9px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: .25s
    }

    .unlock-banner.show {
      opacity: 1;
      transform: translate(-50%, 0)
    }

    .unlock-banner img {
      width: 52px;
      height: 52px;
      object-fit: contain;
      background: #fff;
      border: 3px solid var(--ink);
      border-radius: 12px
    }

    .unlock-banner strong {
      font-size: 13px
    }

    .unlock-banner small {
      display: block;
      font-size: 9px
    }

    .toast {
      position: absolute;
      left: 50%;
      bottom: 18px;
      z-index: 120;
      transform: translate(-50%, 25px);
      opacity: 0;
      background: rgba(36, 49, 61, .95);
      color: #fff;
      border: 3px solid #fff;
      border-radius: 999px;
      padding: 8px 13px;
      font-size: 10px;
      font-weight: 1000;
      transition: .2s;
      white-space: nowrap
    }

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

    .confetti {
      position: absolute;
      width: 8px;
      height: 12px;
      z-index: 130;
      pointer-events: none;
      animation: confetti .9s ease-out forwards
    }

    @keyframes mergePop {
      0% {
        transform: scale(.35) rotate(-8deg)
      }

      55% {
        transform: scale(1.22) rotate(5deg)
      }

      100% {
        transform: scale(1)
      }
    }

    @keyframes floatUp {
      to {
        transform: translateY(-45px) scale(1.12);
        opacity: 0
      }
    }

    @keyframes shake {
      25% {
        transform: translateX(-5px)
      }

      50% {
        transform: translateX(5px)
      }

      75% {
        transform: translateX(-3px)
      }
    }

    @keyframes confetti {
      to {
        transform: translate(var(--x), var(--y)) rotate(520deg);
        opacity: 0
      }
    }

    @media(max-height:700px) {
      #game-screen {
        padding-top: 7px
      }

      .hud {
        margin-bottom: 5px
      }

      .goal-card {
        margin-bottom: 5px;
        padding: 6px 10px
      }

      .goal-avatar {
        width: 44px;
        height: 44px
      }

      .goal-copy strong {
        font-size: 14px
      }

      .queue-card {
        margin-bottom: 5px;
        padding: 6px 8px
      }

      .current-preview {
        width: 48px;
        height: 48px
      }

      .drop-copy strong {
        font-size: 13px
      }

      .queue-mini {
        width: 34px;
        height: 34px
      }

      .game-actions {
        margin-top: 12px
      }

      .game-actions .btn {
        min-height: 35px
      }
    }

    @media(orientation:landscape) and (max-height:560px) {
      .app {
        max-width: 900px
      }

      .screen {
        padding: 10px
      }

      #game-screen {
        display: none;
        grid-template-columns: 250px 1fr;
        grid-template-rows: auto auto 1fr auto;
        gap: 7px
      }

      #game-screen.active {
        display: grid
      }

      .hud,
      .goal-card,
      .queue-card,
      .game-actions {
        grid-column: 1
      }

      .board-shell {
        grid-column: 2;
        grid-row: 1/5;
        height: calc(100dvh - 30px)
      }

      .hud {
        grid-template-columns: repeat(3, 1fr)
      }

      .icon-btn {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
      }
    }