:root {
      --bg-top: #eef1f4;
      --bg-bot: #dfe4e9;
      --panel: #ffffff;
      --ink: #2c3440;
      --muted: #8a94a3;
      --accent: #6c8cff;
      --accent-dark: #4f6be0;
      --success: #5cb85c;
      --tile: #f4f6f8;
      --tile-edge: #d7dde4;
      --shadow: 0 10px 30px rgba(40, 50, 70, 0.12);
    }

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

    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'Nunito', sans-serif;
      background: radial-gradient(circle at 50% 0%, var(--bg-top), var(--bg-bot));
      color: var(--ink);
      touch-action: none;
      user-select: none;
    }

    #app {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

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

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

    .logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 28px;
    }

    .logo-hex {
      width: 110px;
      height: 110px;
      position: relative;
      animation: floaty 2.6s ease-in-out infinite;
    }

    @keyframes floaty {

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

      50% {
        transform: translateY(-8px) rotate(4deg);
      }
    }

    #preloader h1 {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 800;
      font-size: 2.4rem;
      letter-spacing: 1px;
      margin: 0 0 6px;
      color: var(--ink);
    }

    #preloader p {
      margin: 0 0 26px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .5px;
    }

    .bar-track {
      width: 220px;
      height: 10px;
      border-radius: 20px;
      background: #d6dce3;
      overflow: hidden;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    .bar-fill {
      height: 100%;
      width: 0%;
      border-radius: 20px;
      background: linear-gradient(90deg, #8fb2ff, #6c8cff);
      transition: width .18s ease;
    }

    /* ---------- HEADER ---------- */
    #topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: max(14px, env(safe-area-inset-top)) 18px 10px;
      z-index: 5;
    }

    .icon-btn {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      border: none;
      background: var(--panel);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--ink);
      transition: transform .15s ease, box-shadow .15s ease;
    }

    .icon-btn:active {
      transform: scale(0.9);
    }

    .icon-btn svg {
      width: 20px;
      height: 20px;
    }

    #levelLabel {
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--ink);
      letter-spacing: .5px;
      text-align: center;
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 12px;
      transition: transform .15s ease, background .15s ease;
    }

    #levelLabel:active {
      transform: scale(0.94);
      background: rgba(108, 140, 255, 0.1);
    }

    #levelLabel span {
      color: var(--accent-dark);
    }

    .top-group {
      display: flex;
      gap: 10px;
    }

    /* ---------- CANVAS AREA ---------- */
    #stage {
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #gameCanvas {
      display: block;
      touch-action: none;
    }

    /* ---------- BOTTOM BAR ---------- */
    #bottombar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      padding: 14px 18px max(18px, env(safe-area-inset-bottom));
      z-index: 5;
    }

    .pill-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 54px;
      min-width: 54px;
      padding: 0 22px;
      border-radius: 27px;
      border: none;
      background: var(--panel);
      box-shadow: var(--shadow);
      cursor: pointer;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
      font-size: 0.95rem;
      color: var(--ink);
      transition: transform .15s ease;
    }

    .pill-btn:active {
      transform: scale(0.94);
    }

    .pill-btn svg {
      width: 22px;
      height: 22px;
    }

    .pill-btn.primary {
      background: linear-gradient(135deg, #7fd47f, #5cb85c);
      color: #fff;
      box-shadow: 0 10px 24px rgba(92, 184, 92, 0.4);
    }

    .pill-btn.accent {
      background: linear-gradient(135deg, #8fb2ff, #6c8cff);
      color: #fff;
      box-shadow: 0 10px 24px rgba(108, 140, 255, 0.4);
    }

    .pill-btn:disabled {
      opacity: .45;
      pointer-events: none;
    }

    /* ---------- MODALS / OVERLAYS ---------- */
    .overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(30, 36, 48, 0.45);
      backdrop-filter: blur(3px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s ease;
      padding: 20px;
    }

    .overlay.show {
      opacity: 1;
      visibility: visible;
    }

    .card {
      background: var(--panel);
      border-radius: 26px;
      padding: 28px 26px 24px;
      max-width: 380px;
      width: 100%;
      box-shadow: 0 30px 60px rgba(20, 25, 40, 0.3);
      transform: translateY(16px) scale(.96);
      transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
      text-align: center;
    }

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

    .card h2 {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.5rem;
      margin: 2px 0 12px;
      color: var(--ink);
    }

    .card p {
      color: var(--muted);
      font-weight: 600;
      line-height: 1.5;
      margin: 0 0 10px;
      font-size: .95rem;
    }

    .howto-row {
      display: flex;
      align-items: center;
      gap: 14px;
      text-align: left;
      margin: 16px 0;
    }

    .howto-row .ico {
      flex: 0 0 54px;
      height: 54px;
      border-radius: 16px;
      background: #eef2ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-dark);
    }

    .howto-row .ico svg {
      width: 28px;
      height: 28px;
    }

    .howto-row div p {
      margin: 0;
      font-size: .88rem;
    }

    .howto-row strong {
      display: block;
      font-size: .95rem;
      color: var(--ink);
      margin-bottom: 2px;
      font-family: 'Baloo 2', sans-serif;
    }

    .card .cta {
      margin-top: 14px;
      width: 100%;
      border: none;
      height: 52px;
      border-radius: 18px;
      background: linear-gradient(135deg, #8fb2ff, #6c8cff);
      color: #fff;
      font-weight: 800;
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 0 12px 26px rgba(108, 140, 255, 0.4);
      font-family: 'Nunito', sans-serif;

      /* 3D Game Shadow */
      box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, .45),
        /* top highlight */
        inset 0 -2px 0 rgba(0, 0, 0, .12),
        /* bottom shade */
        0 4px 0 #4b69d6,
        /* hard 3D edge */
        0 10px 20px rgba(0, 0, 0, .25),
        /* soft shadow */
        0 16px 30px rgba(108, 140, 255, .35);
      /* glow */
    }

    .card .cta:active {
      transform: scale(.97);
    }

    .miniknot {
      width: 64px;
      height: 64px;
      margin: 0 auto 6px;
    }

    /* ---------- LEVEL SELECT GRID ---------- */
    .levels-card {
      max-width: 400px;
    }

    .levels-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin: 14px 0 4px;
    }

    .level-tile {
      position: relative;
      aspect-ratio: 1/1;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Baloo 2', sans-serif;
      font-weight: 700;
      font-size: 1.15rem;
      background: var(--tile);
      color: var(--ink);
      box-shadow: 0 4px 10px rgba(40, 50, 70, 0.08);
      transition: transform .15s ease;
    }

    .level-tile:active {
      transform: scale(0.9);
    }

    .level-tile.completed {
      background: linear-gradient(135deg, #8fd48f, #5cb85c);
      color: #fff;
    }

    .level-tile.current {
      background: linear-gradient(135deg, #8fb2ff, #6c8cff);
      color: #fff;
      box-shadow: 0 6px 16px rgba(108, 140, 255, 0.45);
    }

    .level-tile.locked {
      background: #e9ecef;
      color: #b7bfca;
      cursor: not-allowed;
    }

    .level-tile.locked:active {
      transform: none;
    }

    .level-tile .badge {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .level-tile .badge svg {
      width: 12px;
      height: 12px;
    }

    .level-tile.completed .badge svg {
      color: #4a9e4a;
    }

    .level-tile.locked .badge svg {
      color: #b7bfca;
    }

    #winOverlay .card {
      padding-top: 34px;
    }

    #winOverlay h2 {
      font-size: 1.7rem;
    }

    .stars {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 6px 0 16px;
    }

    .stars svg {
      width: 34px;
      height: 34px;
      opacity: 0;
      transform: scale(0.3);
    }

    .stars svg.pop {
      animation: starPop .5s cubic-bezier(.3, 1.6, .4, 1) forwards;
    }

    @keyframes starPop {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .win-btns {
      display: flex;
      gap: 10px;
      margin-top: 6px;
    }

    .win-btns button {
      flex: 1;
    }

    #confettiCanvas {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 101;
    }

    .toast {
      position: fixed;
      left: 50%;
      top: 22px;
      transform: translateX(-50%) translateY(-20px);
      background: var(--ink);
      color: #fff;
      padding: 10px 18px;
      border-radius: 14px;
      font-weight: 700;
      font-size: .85rem;
      opacity: 0;
      transition: all .35s ease;
      z-index: 150;
      pointer-events: none;
    }

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

    @media (max-width:420px) {
      #levelLabel {
        font-size: 1rem;
      }

      .pill-btn {
        padding: 0 16px;
        height: 50px;
      }

      .card {
        padding: 22px 18px 20px;
      }
    }