:root {
      --brand: #FF6B00;
      --brand-dark: #CC5500;
      --brand-light: #FFF0E6;
      --green: #58CC02;
      --green-dark: #46A302;
      --green-light: #E5F9D0;
      --red: #FF4B4B;
      --red-light: #FFE8E8;
      --blue: #1CB0F6;
      --blue-light: #E8F7FE;
      --purple: #CE82FF;
      --purple-light: #F5E6FF;
      --yellow: #FFD900;
      --yellow-light: #FFFBE6;
      --gray: #AFAFAF;
      --gray-light: #F7F7F7;
      --gray-mid: #E5E5E5;
      --text: #3C3C3C;
      --text-light: #777;
      --white: #FFFFFF;
      --shadow: 0 2px 0 rgba(0, 0, 0, .15);
      --radius: 16px;
      --radius-sm: 12px;
      --font: 'Nunito', sans-serif;
      --header-bg: var(--white);
      --toast-bg: var(--text);
      --toast-text: #fff;
      --tab-color: var(--gray);
    }

    html.dark-mode {
      --brand-light: #3d1a00;
      --green-light: #1c3d00;
      --red-light: #3d0f0f;
      --blue-light: #002b42;
      --purple-light: #2b0042;
      --yellow-light: #3d3600;
      --gray: #7a7a7a;
      --gray-light: #323234;
      --gray-mid: #1c1c1e;
      --text: #f2f2f7;
      --text-light: #b0b0b8;
      --white: #242426;
      --header-bg: #2a2a2c;
      --toast-bg: #f2f2f7;
      --toast-text: #1c1c1e;
      --tab-color: #ffffff;
    }
    html.dark-mode body, html.dark-mode {
      background: #000000;
    }
    ::-webkit-scrollbar { display: none; }

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

    html,
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      overscroll-behavior-y: none;
      background: #f0f0f0;
      font-family: var(--font)
    }

    input,
    button {
      font-family: var(--font)
    }

    button {
      cursor: pointer
    }

    #app {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: var(--white);
      overflow: hidden;
      position: relative;
      max-width: 420px;
      margin: 0 auto;
      box-shadow: 0 0 40px rgba(0, 0, 0, .15)
    }

    .scr {
      display: none;
      flex-direction: column;
      flex: 1;
      overflow: hidden
    }

    .scr.on {
      display: flex
    }

    .scroll {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: none;
    }

    .scroll::-webkit-scrollbar {
      width: 3px
    }

    .scroll::-webkit-scrollbar-thumb {
      background: var(--gray-mid);
      border-radius: 2px
    }

    /* ── TOPBAR ── */
    .top {
      background: var(--white);
      padding: 14px 16px 12px;
      padding-top: calc(env(safe-area-inset-top, 0px)+14px);
      flex-shrink: 0;
      border-bottom: 2px solid var(--gray-mid);
      cursor: pointer;
      position: relative
    }

    .top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px
    }

    .top-title {
      font-size: 16px;
      font-weight: 900;
      color: var(--brand);
      display: flex;
      align-items: center;
      gap: 6px;
      letter-spacing: -.3px
    }

    .top-stats {
      display: flex;
      gap: 10px;
      align-items: center
    }

    .stat-pill {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 800;
      color: var(--text)
    }

    .stat-pill i {
      font-size: 15px
    }

    .stat-pill.xp {
      color: var(--brand)
    }

    .stat-pill.streak {
      color: var(--yellow);
      -webkit-text-stroke: .5px rgba(0, 0, 0, .2)
    }

    .stat-pill.coin {
      color: var(--yellow)
    }

    /* HP bar */
    .hp-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px
    }

    .hp-label {
      background: var(--green-light);
      border-radius: 8px;
      padding: 2px 6px;
      font-size: 11px;
      font-weight: 800;
      color: var(--green);
      white-space: nowrap;
      width: 56px;
      flex-shrink: 0;
      text-align: center;
      overflow: hidden;
      box-sizing: border-box
    }

    .hp-track {
      flex: 1;
      height: 12px;
      background: var(--gray-mid);
      border-radius: 6px;
      overflow: hidden
    }

    .hp-fill {
      height: 100%;
      border-radius: 6px;
      transition: width .5s ease;
      background: var(--green)
    }

    .hp-fill.mid {
      background: var(--yellow)
    }

    .hp-fill.low {
      background: var(--red)
    }

    .hp-text {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-light);
      width: 44px;
      flex-shrink: 0;
      text-align: right
    }

    /* XP bar */
    .xp-row {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .xp-lv-badge {
      background: var(--brand-light);
      border-radius: 8px;
      padding: 2px 6px;
      font-size: 11px;
      font-weight: 800;
      color: var(--brand);
      white-space: nowrap;
      width: 56px;
      flex-shrink: 0;
      text-align: center;
      overflow: hidden;
      box-sizing: border-box
    }

    .xp-track {
      flex: 1;
      height: 8px;
      background: var(--gray-mid);
      border-radius: 4px;
      overflow: hidden
    }

    .xp-fill {
      height: 100%;
      background: var(--brand);
      border-radius: 4px;
      transition: width .6s cubic-bezier(.34, 1.56, .64, 1)
    }

    .xp-next {
      font-size: 10px;
      font-weight: 700;
      color: var(--gray);
      width: 44px;
      flex-shrink: 0;
      text-align: right
    }

    .tap-hint {
      font-size: 13px;
      font-weight: 800;
      color: var(--gray);
      text-align: left;
      margin-top: 4px
    }

    /* ── TABS ── */
    .tabs {
      display: flex;
      justify-content: center;
      gap: 12px;
      padding: 0 24px;
      border-top: 2px solid var(--gray-mid);
      background: var(--white);
      flex-shrink: 0;
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    .tab {
      flex: 1;
      max-width: 80px;
      text-align: center;
      padding: 14px 0 8px;   /* ← controls footer height independently */
      font-size: 10px;
      font-weight: 790;
      color: var(--tab-color);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      border-top: 3px solid transparent;
      transition: color .15s;
      letter-spacing: .3px;
      position: relative
    }

    .tab i,
    .tab svg {
      font-size: 35px;
      transform: translateY(7px); /* ← controls icon vertical position independently */
      width: 35px;
      height: 35px
    }

    .tab.on {
      color: var(--brand);
      border-top-color: var(--brand)
    }

    /* ── LOADING ── */
    .loading-screen {
      position: absolute;
      inset: 0;
      background: var(--white);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 200
    }

    .loading-icon {
      font-size: 56px;
      margin-bottom: 14px;
      animation: bob 1.2s ease-in-out infinite
    }

    @keyframes bob {

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

      50% {
        transform: translateY(-8px)
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .spinner {
      width: 30px;
      height: 30px;
      border: 3px solid var(--gray-mid);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: spin .7s linear infinite;
      margin-top: 16px
    }

    /* ── ONBOARDING ── */
    .ob {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 28px 20px 24px;
      overflow-y: auto;
      background: var(--white)
    }

    .ob-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-bottom: 22px
    }

    .ob-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gray-mid)
    }

    .ob-dot.on {
      background: var(--brand)
    }

    .ob-title {
      font-size: 22px;
      font-weight: 900;
      color: var(--text);
      text-align: center;
      margin-bottom: 8px;
      line-height: 1.3
    }

    .ob-sub {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-light);
      text-align: center;
      line-height: 1.6;
      margin-bottom: 20px
    }

    .ob-lbl {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-light);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .ob-inp {
      width: 100%;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px;
      padding: 14px 16px;
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius-sm);
      background: var(--white);
      color: var(--text);
      outline: none;
      transition: border-color .15s
    }

    .ob-inp:focus {
      border-color: var(--brand)
    }

    .ob-btn {
      width: 100%;
      padding: 15px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      margin-top: 10px;
      letter-spacing: .3px;
      transition: transform .1s, box-shadow .1s
    }

    .ob-btn.primary {
      background: var(--brand);
      color: var(--white);
      box-shadow: 0 4px 0 var(--brand-dark)
    }

    .ob-btn.primary:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 var(--brand-dark)
    }

    .ob-btn.secondary {
      background: var(--gray-light);
      border: 2px solid var(--gray-mid);
      color: var(--text-light);
      margin-top: 8px
    }

    .ob-btn:disabled {
      opacity: .5;
      cursor: not-allowed
    }

    .choice-card {
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius);
      padding: 16px 18px;
      margin-bottom: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--white);
      transition: border-color .15s, background .15s;
      -webkit-tap-highlight-color: transparent
    }

    .choice-card:active {
      border-color: var(--brand);
      background: var(--brand-light)
    }

    .choice-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0
    }

    .choice-card-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--text)
    }

    .choice-card-sub {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-light);
      margin-top: 2px
    }

    .goal-row {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      align-items: center
    }

    .goal-row input {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 12px;
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius-sm);
      background: var(--white);
      color: var(--text);
      outline: none
    }

    .goal-row input:focus {
      border-color: var(--brand)
    }

    /* ── CHAR SELECT ── */
    .char-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 14px
    }

    .char-card {
      border: 3px solid var(--gray-mid);
      border-radius: var(--radius-sm);
      padding: 6px 4px;
      text-align: center;
      cursor: pointer;
      background: var(--white);
      transition: all .15s;
      -webkit-tap-highlight-color: transparent;
      aspect-ratio: 1/2.2
    }

    .char-card.on {
      border-color: var(--brand);
      background: var(--brand-light)
    }

    .char-card svg {
      image-rendering: pixelated;
      display: block;
      margin: 0 auto
    }

    .color-swatch {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      border: 3px solid transparent;
      transition: all .15s;
      flex-shrink: 0
    }

    .color-swatch.on {
      border-color: #fff;
      box-shadow: 0 0 0 2px var(--text);
      transform: scale(1.15)
    }

    /* ── TODAY ── */
    .p16 {
      padding: 16px
    }

    .progress-card {
      background: var(--gray-light);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin-bottom: 14px
    }

    .progress-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px
    }

    .progress-label {
      font-size: 14px;
      font-weight: 800;
      color: var(--text)
    }

    .progress-pts {
      font-size: 13px;
      font-weight: 800;
      color: var(--brand)
    }

    .progress-bar {
      height: 12px;
      background: var(--gray-mid);
      border-radius: 6px;
      overflow: hidden
    }

    .progress-fill {
      height: 100%;
      background: var(--green);
      border-radius: 6px;
      transition: width .5s cubic-bezier(.34, 1.56, .64, 1)
    }

    .sec-lbl {
      font-size: 12px;
      font-weight: 800;
      color: var(--gray);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 12px
    }

    .goal-card {
      border-radius: var(--radius);
      border: 2px solid var(--gray-mid);
      padding: 14px 16px;
      margin-bottom: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--white);
      transition: all .15s;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 2px 0 var(--gray-mid)
    }

    .goal-card:active {
      transform: scale(.98)
    }

    .goal-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0
    }

    .goal-name {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      flex: 1
    }

    .goal-sub {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-light);
      margin-top: 2px
    }

    .goal-pts {
      font-size: 13px;
      font-weight: 800;
      color: var(--brand);
      flex-shrink: 0
    }

    .goal-done-card {
      border-radius: var(--radius);
      border: 2px solid var(--green);
      padding: 14px 16px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 14px;
      background: var(--green-light);
      opacity: .7
    }

    .goal-done-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    /* ── BOSS ── */
    .boss-card {
      border-radius: var(--radius);
      border: 2px solid var(--gray-mid);
      overflow: hidden;
      margin-bottom: 14px;
      background: var(--white)
    }

    .boss-top {
      padding: 14px 16px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      background: var(--gray-light);
      cursor: pointer;
      box-shadow: 0 3px 0 var(--gray-mid);
      position: relative;
      z-index: 1;
      transition: all .1s
    }

    .boss-top:active {
      box-shadow: 0 1px 0 var(--gray-mid);
      transform: translateY(2px)
    }

    .boss-emoji {
      font-size: 44px;
      line-height: 1;
      flex-shrink: 0;
      width: 56px;
      text-align: center;
      margin-top: 18px
    }

    .boss-info {
      flex: 1
    }

    .boss-name {
      font-size: 14px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 6px;
      line-height: 1.3
    }

    .boss-hp-track {
      height: 12px;
      background: var(--gray-mid);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 4px
    }

    .boss-hp-bar {
      height: 100%;
      border-radius: 6px;
      background: linear-gradient(90deg, var(--red), #FF8080);
      transition: width .6s ease
    }

    .boss-hp-row {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-light)
    }

    .boss-mechanic {
      background: var(--brand-light);
      padding: 10px 16px;
      border-top: 1px solid rgba(255, 107, 0, .15)
    }

    .boss-mechanic-text {
      font-size: 12px;
      font-weight: 700;
      color: var(--brand);
      line-height: 1.5
    }

    .boss-divider {
      height: 1px;
      background: var(--gray-mid)
    }

    .boss-dmg {
      padding: 12px 16px
    }

    .boss-dmg-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--gray);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 8px
    }

    .dmg-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px
    }

    .dmg-av {
      width: 20px;
      height: 60px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 800;
      flex-shrink: 0;
      color: #fff;
      overflow: hidden;
      image-rendering: pixelated
    }

    .dmg-name {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      width: 46px;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .dmg-track {
      flex: 1;
      height: 7px;
      background: var(--gray-mid);
      border-radius: 4px;
      overflow: hidden
    }

    .dmg-fill {
      height: 100%;
      border-radius: 4px;
      background: var(--brand);
      transition: width .4s ease
    }

    .dmg-num {
      font-size: 11px;
      font-weight: 800;
      color: var(--brand);
      min-width: 28px;
      text-align: right
    }

    .dmg-check {
      font-size: 13px;
      flex-shrink: 0;
      width: 16px;
      text-align: center
    }

    .boss-status {
      padding: 10px 16px;
      border-top: 1px solid var(--gray-mid);
      font-size: 12px;
      font-weight: 800;
      text-align: center
    }

    .boss-tier {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 20px;
      margin-bottom: 4px
    }

    /* ── KNOCKED OUT ── */
    .knocked-card {
      border-radius: var(--radius);
      border: 2px solid var(--red);
      background: var(--red-light);
      padding: 16px;
      margin-bottom: 14px;
      text-align: center
    }

    .knocked-title {
      font-size: 15px;
      font-weight: 900;
      color: var(--red);
      margin-bottom: 6px
    }

    .knocked-sub {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-light);
      line-height: 1.5;
      margin-bottom: 12px
    }

    .revive-btn {
      padding: 10px 20px;
      background: var(--red);
      border: none;
      border-radius: var(--radius-sm);
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 3px 0 #CC2B2B;
      transition: transform 0.1s
    }
    .revive-btn:active {
      transform: translateY(3px);
      box-shadow: 0 0 0 #CC2B2B;
    }

    /* ── BOSS DEFEATED ── */
    .boss-won-card {
      border-radius: var(--radius);
      border: 2px solid var(--green);
      background: var(--green-light);
      padding: 16px;
      margin-bottom: 14px;
      text-align: center
    }

    /* ── SOS ── */
    .sos-fab {
      position: relative
    }

    .sos-popup {
      position: absolute;
      bottom: 76px;
      left: 12px;
      right: 12px;
      background: var(--white);
      border-radius: var(--radius);
      border: 2px solid var(--gray-mid);
      padding: 16px;
      z-index: 40;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .15)
    }

    .sos-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px
    }

    .sos-chip {
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 20px;
      border: 2px solid var(--gray-mid);
      color: var(--text-light);
      cursor: pointer;
      background: var(--white);
      transition: all .1s
    }

    .sos-chip.on {
      background: var(--red-light);
      border-color: var(--red);
      color: var(--red)
    }

    .sos-send {
      width: 100%;
      padding: 12px;
      background: var(--red);
      border: none;
      border-radius: var(--radius-sm);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 3px 0 #CC2B2B
    }

    .sos-back {
      position: absolute;
      inset: 0;
      z-index: 39;
      background: rgba(0, 0, 0, .3)
    }

    /* ── SQUAD ── */
    .sq-card {
      background: var(--white);
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius);
      padding: 14px 16px;
      margin-bottom: 10px;
      box-shadow: 0 3px 0 var(--gray-mid)
    }

    .sq-av-wrap {
      width: 52px;
      height: 116px;
      border-radius: 12px;
      flex-shrink: 0;
      border: 3px solid var(--gray-mid);
      background: var(--white);
      padding: 3px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .sq-av-inner {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: visible;
      image-rendering: pixelated;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .sq-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: transform .1s
    }

    .sq-header:active {
      transform: translateY(2px);
      opacity: 0.8
    }

    .sq-name {
      font-size: 15px;
      font-weight: 800;
      color: var(--text)
    }

    .sq-sub {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-light);
      margin-top: 1px
    }

    .streak-pill {
      background: var(--yellow-light);
      border: 2px solid var(--yellow);
      border-radius: 20px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 800;
      color: #CC9900;
      display: flex;
      align-items: center;
      gap: 3px;
      margin-left: auto
    }

    .gc-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px solid var(--gray-light)
    }

    .gc-row:last-child {
      border-bottom: none
    }

    .gc-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-light)
    }

    .gc-name.done {
      color: var(--text);
      font-weight: 800
    }

    /* ── CHAT ── */
    .chat-msg-wrap {
      display: flex;
      gap: 8px;
      margin-bottom: 14px
    }

    .chat-msg-wrap.mine {
      flex-direction: row-reverse
    }

    .chat-av {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      image-rendering: pixelated;
      border: 2px solid var(--gray-mid)
    }

    .chat-bubble {
      background: var(--gray-light);
      border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
      padding: 9px 12px;
      max-width: 220px
    }

    .chat-bubble.mine {
      background: var(--brand-light);
      border-radius: var(--radius-sm) 0 var(--radius-sm) var(--radius-sm)
    }

    .chat-sender {
      font-size: 10px;
      font-weight: 800;
      color: var(--text-light);
      margin-bottom: 3px
    }

    .chat-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.5
    }

    .chat-reacts {
      display: flex;
      gap: 4px;
      margin-top: 6px
    }

    .react-btn {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 20px;
      border: 1.5px solid var(--gray-mid);
      background: var(--white);
      cursor: pointer;
      color: var(--text-light);
      transition: all .1s
    }

    .react-btn.on {
      background: var(--brand-light);
      border-color: var(--brand);
      color: var(--brand)
    }

    /* ── Custom on-screen keyboard for squad chat (detached, full-width bottom) ── */
    .sqkb-fixed {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      background: #FFEBE0;
      border-top: 2px solid var(--brand);
      padding: 6px 4px;
      padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
      display: none;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 -4px 16px rgba(255, 107, 0, .15);
      user-select: none;
      -webkit-user-select: none
    }

    .sqkb-fixed.on {
      display: flex
    }

    .sqkb-row {
      display: flex;
      gap: 5px;
      justify-content: center
    }

    .sqkb-key {
      flex: 1;
      min-width: 0;
      height: 42px;
      border-radius: 6px;
      border: none;
      background: #FFFFFF;
      color: var(--text);
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 1px 0 rgba(204, 85, 0, .3);
      padding: 0;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.1s ease, color 0.1s ease
    }

    .sqkb-key:active {
      background: var(--brand-light);
      color: var(--brand)
    }

    .sqkb-special {
      background: #FFC299;
      color: var(--brand-dark);
      font-size: 14px;
      font-weight: 700;
      flex: 1.5;
      box-shadow: 0 1px 0 rgba(204, 85, 0, .3)
    }

    .sqkb-special:active {
      background: #FFAC75
    }

    .sqkb-special.on {
      background: var(--brand);
      color: #fff
    }

    .sqkb-special svg {
      width: 22px;
      height: 22px
    }

    .sqkb-space {
      flex: 5;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-light)
    }

    .sqkb-send-inline {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--brand);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .08s, background-color .08s;
      -webkit-tap-highlight-color: transparent
    }

    .sqkb-send-inline:active {
      transform: translateY(-50%) scale(0.9);
      background: var(--brand-dark)
    }

    .sqkb-send-inline svg {
      width: 15px;
      height: 15px;
      transform: translate(-1px, 1px)
    }

    .sos-msg {
      background: var(--red-light);
      border: 2px solid var(--red);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      margin-bottom: 14px
    }

    .sos-msg-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px
    }

    .sos-badge {
      font-size: 10px;
      font-weight: 800;
      background: var(--red);
      color: #fff;
      padding: 2px 7px;
      border-radius: 20px
    }

    .chat-footer {
      padding: 10px 14px;
      padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      border-top: 2px solid var(--gray-mid);
      display: flex;
      gap: 8px;
      flex-shrink: 0;
      background: var(--white)
    }

    .chat-footer input {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 14px;
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius-sm);
      outline: none;
      background: var(--gray-light);
      color: var(--text)
    }

    .chat-footer input:focus {
      border-color: var(--brand);
      background: var(--white)
    }

    .chat-send-btn {
      padding: 0 16px;
      background: var(--brand);
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 800;
      color: #fff;
      cursor: pointer;
      box-shadow: 0 3px 0 var(--brand-dark)
    }

    /* ── INVENTORY ── */
    .inv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px
    }

    .inv-card {
      border-radius: var(--radius-sm);
      border: 2.5px solid var(--gray-mid);
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      background: var(--white);
      position: relative;
      transition: transform .1s;
      box-shadow: 0 2px 0 var(--gray-mid)
    }

    .inv-card:active {
      transform: scale(.95)
    }

    .inv-card.common {
      border-color: #AFAFAF
    }

    .inv-card.rare {
      border-color: var(--blue);
      box-shadow: 0 2px 0 rgba(28, 176, 246, .3)
    }

    .inv-card.epic {
      border-color: var(--purple);
      box-shadow: 0 2px 0 rgba(206, 130, 255, .3)
    }

    .inv-icon {
      font-size: 28px;
      margin-bottom: 5px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto
    }

    .inv-name {
      font-size: 9px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.4
    }

    .inv-qty {
      position: absolute;
      top: 5px;
      right: 5px;
      font-size: 9px;
      font-weight: 800;
      background: var(--brand);
      color: #fff;
      border-radius: 10px;
      padding: 1px 5px;
      min-width: 18px;
      text-align: center
    }

    .inv-rarity {
      font-size: 8px;
      font-weight: 800;
      margin-top: 3px;
      letter-spacing: .3px
    }

    .inv-rarity.common {
      color: var(--gray)
    }

    .inv-rarity.rare {
      color: var(--blue)
    }

    .inv-rarity.epic {
      color: var(--purple)
    }

    .inv-empty {
      text-align: center;
      padding: 40px 20px
    }

    /* ── ITEM SHEET ── */
    @keyframes popupIn {
      0% { opacity: 0; transform: scale(0.95) translateY(10px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes permPopupOut {
      0% { opacity: 1; transform: scale(1) translateY(0); }
      100% { opacity: 0; transform: scale(0.95) translateY(10px); }
    }
    #main-overlay-box,
    #sos-popup {
      animation: popupIn 0.3s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
    }

    .item-sheet-back {
      position: absolute;
      inset: 0;
      z-index: 59;
      display: none;
      background: rgba(0, 0, 0, .4)
    }

    .item-sheet-back.open {
      display: block
    }

    .item-sheet {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--white);
      border-radius: 24px 24px 0 0;
      padding: 20px 20px 36px;
      z-index: 60;
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.34, 1.56, .64, 1)
    }

    .item-sheet.open {
      transform: translateY(0)
    }

    .sheet-handle {
      width: 44px;
      height: 4px;
      background: var(--gray-mid);
      border-radius: 2px;
      margin: 0 auto 16px
    }

    /* ── PATH OVERLAY ── */
    @keyframes pathHintFloat {

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

      50% {
        transform: translateY(-5px)
      }
    }

    .path-overlay {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: -220px;
      z-index: 70;
      display: none;
      flex-direction: column;
      background: #1a2e1a
    }

    .path-overlay.open {
      display: flex
    }

    .path-header {
      background: rgba(0, 0, 0, .45);
      backdrop-filter: blur(6px);
      padding: 10px 16px;
      padding-top: calc(env(safe-area-inset-top, 0px)+10px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      flex-shrink: 0
    }

    .path-swipe-hint {
      color: rgba(255, 255, 255, .65);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .07em;
      animation: pathHintFloat 2.4s ease-in-out infinite
    }

    .path-title {
      font-size: 18px;
      font-weight: 900;
      color: #fff
    }

    .path-close {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      border: none;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff
    }

    .path-wrap {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      background: #FFFFFF;
      overscroll-behavior: none;
    }

    /* Fog layers */
    .path-fog-top {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      height: 140px;
      background: linear-gradient(to bottom, rgba(180, 210, 180, 1) 0%, rgba(180, 210, 180, .7) 40%, rgba(180, 210, 180, 0) 100%);
      pointer-events: none;
      z-index: 10;
      margin-bottom: -140px
    }

    .path-fog-bottom {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: linear-gradient(to top, rgba(30, 60, 30, .8) 0%, rgba(30, 60, 30, 0) 100%);
      pointer-events: none;
      z-index: 10;
      margin-top: -80px
    }

    /* ── CHEST MODAL ── */
    .chest-modal {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      backdrop-filter: blur(5px);
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column
    }

    .chest-modal.open {
      display: flex
    }

    .chest-box {
      background: var(--white);
      border: 4px solid var(--gray-mid);
      border-radius: 28px;
      padding: 32px 24px;
      text-align: center;
      max-width: 320px;
      width: calc(100% - 40px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
      overflow: visible;
      animation: drSlideUp .6s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    .chest-em {
      font-size: 72px;
      display: block;
      margin-bottom: 14px;
      cursor: pointer;
      transition: transform .08s;
      line-height: 1
    }

    .chest-em:active {
      transform: scale(.88)
    }

    /* ── LEVEL UP POPUP ── */
    @keyframes lvupIn {
      0% {
        opacity: 0;
        transform: scale(.5) translateY(40px)
      }

      60% {
        transform: scale(1.08) translateY(-6px)
      }

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

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

      100% {
        opacity: 0;
        transform: scale(.8) translateY(-30px)
      }
    }

    @keyframes itemHover {

      0%,
      100% {
        transform: translateY(0) scale(1)
      }

      50% {
        transform: translateY(-10px) scale(1.05)
      }
    }

    @keyframes chestFloat {

      0%,
      100% {
        transform: translateY(0) scale(1) rotate(-2deg)
      }

      50% {
        transform: translateY(-12px) scale(1.06) rotate(2deg)
      }
    }

    @keyframes rarityGlow {

      0%,
      100% {
        box-shadow: 0 0 18px 4px var(--glow-col)
      }

      50% {
        box-shadow: 0 0 36px 12px var(--glow-col)
      }
    }

    @keyframes rarityGlowFilter {

      0%,
      100% {
        filter: drop-shadow(0 0 10px var(--glow-col))
      }

      50% {
        filter: drop-shadow(0 0 24px var(--glow-col))
      }
    }

    @keyframes coinPour {
      0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg)
      }

      100% {
        opacity: 0;
        transform: translate(var(--cx), var(--cy)) scale(.6) rotate(var(--cr))
      }
    }

    @keyframes floatUp {
      0% {
        opacity: 0;
        transform: translateY(30px) scale(.6)
      }

      60% {
        opacity: 1;
        transform: translateY(-8px) scale(1.08)
      }

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

    #lvup-overlay {
      position: absolute;
      inset: 0;
      z-index: 88;
      background: rgba(0, 0, 0, .8);
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 24px
    }

    #lvup-overlay.open {
      display: flex
    }

    #lvup-card {
      background: linear-gradient(160deg, #1a0a00, #2d1200, #3d1a00);
      border: 2px solid rgba(255, 107, 0, .35);
      border-radius: 24px;
      padding: 32px 28px;
      max-width: 300px;
      width: 100%;
      position: relative;
      overflow: visible;
      box-shadow: 0 20px 60px rgba(255, 107, 0, .3);
      cursor: pointer;
      user-select: none
    }

    #lvup-card.in {
      animation: lvupIn .6s cubic-bezier(.34, 1.56, .64, 1) both
    }

    #lvup-card.out {
      animation: lvupOut .4s ease-in both
    }

    .lvup-item-wrap {
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
      position: relative;
      animation: itemHover 2s ease-in-out infinite;
      background: transparent
    }

    .lvup-coin-particle {
      position: fixed;
      width: 24px;
      height: 24px;
      pointer-events: none;
      image-rendering: pixelated;
      animation: coinPour var(--dur) ease-out both;
      z-index: 9999
    }

    /* lvup chest phases */
    #lvup-chest-phase {
      cursor: pointer;
      user-select: none
    }

    .float-in {
      animation: floatUp .5s cubic-bezier(.34, 1.56, .64, 1) both
    }

    /* ── DEFEAT ── */
    .big-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .8);
      z-index: 85;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 28px
    }

    .big-overlay.open {
      display: flex
    }

    /* ── ME ── */
    .prof-hero {
      background: var(--brand);
      margin-top: 0;
      padding: 14px 16px 16px;
      padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
      text-align: center;
      flex-shrink: 0;
      border-radius: 0 0 16px 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)
    }

    .prof-av {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      overflow: hidden;
      margin: 0 auto 10px;
      border: 3px solid rgba(255, 255, 255, .4);
      image-rendering: pixelated;
      background: rgba(255, 255, 255, .2)
    }

    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px
    }

    .stat-c {
      background: var(--gray-light);
      border-radius: var(--radius-sm);
      padding: 12px;
      text-align: center;
      border: 2px solid var(--gray-mid)
    }

    .stat-v {
      font-size: 22px;
      font-weight: 900;
      color: var(--text)
    }

    .stat-l {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-light);
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .invite-box {
      background: var(--brand-light);
      border-radius: var(--radius);
      padding: 16px;
      text-align: center;
      margin-bottom: 16px;
      border: 2px solid rgba(255, 107, 0, .2)
    }

    .invite-code {
      font-family: 'Press Start 2P', monospace;
      font-size: 18px;
      color: var(--brand);
      margin: 8px 0;
      letter-spacing: .15em
    }

    .me-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 2px solid var(--gray-light);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent
    }

    .me-row:last-child {
      border-bottom: none
    }

    .me-row-left {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .me-row-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0
    }

    .me-row-title {
      font-size: 15px;
      font-weight: 800;
      color: var(--text)
    }

    .me-row-sub {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-light);
      margin-top: 2px
    }

    .set-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 0;
      border-bottom: 2px solid var(--gray-light)
    }

    .set-row:last-child {
      border-bottom: none
    }

    .set-label {
      font-size: 15px;
      font-weight: 700;
      color: var(--text)
    }

    .set-inp {
      font-size: 14px;
      font-weight: 600;
      width: 130px;
      text-align: right;
      border: none;
      outline: none;
      background: transparent;
      color: var(--brand)
    }

    .bt-chip {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      border: 2px solid var(--gray-mid);
      color: var(--text-light);
      cursor: pointer;
      background: var(--white)
    }

    .bt-chip.on {
      background: var(--brand-light);
      border-color: var(--brand);
      color: var(--brand)
    }

    /* ── UPGRADES ── */
    .upgrade-card {
      background: var(--white);
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 2px 0 var(--gray-mid)
    }

    .upgrade-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--gray-mid);
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--gray-light)
    }

    .upgrade-icon {
      font-size: 22px
    }

    .upgrade-stat-name {
      font-size: 15px;
      font-weight: 900;
      color: var(--text);
      flex: 1
    }

    .upgrade-lv {
      font-size: 12px;
      font-weight: 800;
      color: var(--text-light)
    }

    .upgrade-desc {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-light)
    }

    .upgrade-nodes {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      overflow-x: auto
    }

    .upgrade-node {
      width: 52px;
      flex-shrink: 0;
      text-align: center;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent
    }

    .upgrade-node-circle {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 3px solid var(--gray-mid);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
      background: var(--gray-light);
      transition: all .15s
    }

    .upgrade-node-circle.unlocked {
      background: var(--green);
      border-color: var(--green-dark)
    }

    .upgrade-node-circle.available {
      border-color: var(--brand);
      background: var(--brand-light);
      animation: nodePulse 2s ease infinite
    }

    .upgrade-node-circle.locked {
      opacity: .4
    }

    .upgrade-node-icon {
      font-size: 16px
    }

    .upgrade-node-cost {
      font-size: 8px;
      font-weight: 800;
      color: var(--brand)
    }

    .upgrade-node-label {
      font-size: 8px;
      font-weight: 700;
      color: var(--text-light);
      line-height: 1.4;
      text-align: center
    }

    @keyframes nodePulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, .4)
      }

      70% {
        box-shadow: 0 0 0 6px rgba(255, 107, 0, 0)
      }
    }

    /* ── BADGES ── */
    .badge-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .badge-card {
      background: var(--white);
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius-sm);
      padding: 14px;
      text-align: center;
      box-shadow: 0 2px 0 var(--gray-mid)
    }

    .badge-card.unlocked {
      border-color: var(--brand);
      background: var(--brand-light)
    }

    .badge-icon {
      font-size: 30px;
      margin-bottom: 6px
    }

    .badge-icon.locked {
      filter: grayscale(1);
      opacity: .3
    }

    .badge-name {
      font-size: 12px;
      font-weight: 800;
      color: var(--text)
    }

    .badge-desc {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-light);
      margin-top: 3px;
      line-height: 1.4
    }

    /* ── LOCK ── */
    .lk-toggle {
      display: flex;
      background: var(--gray-light);
      border-radius: var(--radius-sm);
      padding: 4px;
      margin-bottom: 16px;
      border: 2px solid var(--gray-mid)
    }

    .lk-btn {
      flex: 1;
      padding: 9px;
      text-align: center;
      font-size: 13px;
      font-weight: 800;
      border-radius: 10px;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--text-light);
      transition: all .15s
    }

    .lk-btn.on {
      background: var(--white);
      color: var(--brand);
      box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
    }

    .step-block {
      background: var(--gray-light);
      border-radius: var(--radius-sm);
      padding: 14px;
      margin-bottom: 10px
    }

    .step-block-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .step-item {
      display: flex;
      gap: 10px;
      margin-bottom: 10px
    }

    .step-item:last-child {
      margin-bottom: 0
    }

    .step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--brand);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px
    }

    .step-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 2px
    }

    .step-desc {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-light);
      line-height: 1.5
    }

    .step-path {
      font-size: 10px;
      font-weight: 700;
      background: var(--white);
      border: 1.5px solid var(--gray-mid);
      border-radius: 6px;
      padding: 2px 8px;
      display: inline-block;
      margin-top: 4px;
      font-family: monospace;
      color: var(--text)
    }

    .pw-vault {
      background: var(--green-light);
      border-radius: var(--radius-sm);
      padding: 14px;
      border: 2px solid rgba(88, 204, 2, .3);
      margin-top: 4px
    }

    .pw-vault-title {
      font-size: 13px;
      font-weight: 900;
      color: var(--green-dark);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    /* ── SOS IN-APP NOTIFICATION ── */

    /* ── OVERLAYS ── */
    .main-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .7);
      z-index: 50;
      display: none;
      flex-direction: column;
      padding: 20px;
      overflow-y: auto;
      scrollbar-width: none
    }

    .main-overlay::-webkit-scrollbar {
      display: none
    }

    #squad-chat-msgs {
      scrollbar-width: none;
      -ms-overflow-style: none
    }
    #squad-chat-msgs::-webkit-scrollbar {
      display: none
    }

    .main-overlay.open {
      display: flex
    }

    .main-overlay-box {
      background: var(--white);
      border-radius: var(--radius);
      padding: 20px;
      max-width: 380px;
      width: 100%;
      margin: auto;
      position: relative
    }

    .overlay-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .overlay-sub {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-light);
      margin-bottom: 16px;
      line-height: 1.5
    }

    .overlay-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--gray-light);
      border: none;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-light);
      flex-shrink: 0
    }

    .save-check-btn {
      transition: transform .12s cubic-bezier(.34, 1.56, .64, 1), box-shadow .12s
    }

    .save-check-btn:active {
      transform: translateY(3px) scale(.88) !important;
      box-shadow: 0 1px 0 var(--green-dark) !important
    }

    /* ── TOAST ── */
    #toast {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px)+70px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--toast-bg);
      color: var(--toast-text);
      font-size: 13px;
      font-weight: 700;
      padding: 10px 18px;
      border-radius: 20px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .2s;
      z-index: 300;
      text-align: center;
      max-width: 300px;
      white-space: normal;
      line-height: 1.5
    }

    #toast.show {
      opacity: 1
    }

    /* ── ANIMATIONS ── */
    @keyframes bossShake {

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

      20% {
        transform: translateX(-7px)
      }

      40% {
        transform: translateX(7px)
      }

      60% {
        transform: translateX(-4px)
      }

      80% {
        transform: translateX(4px)
      }
    }

    @keyframes bossFlash {

      0%,
      100% {
        filter: brightness(1)
      }

      50% {
        filter: brightness(2.5)
      }
    }

    /* ── Cinematic boss-hit overlay ── */
    @keyframes bhoFade {

      0%,
      55% {
        opacity: 1
      }

      100% {
        opacity: 0
      }
    }

    @keyframes bhoEmoji {
      0% {
        transform: scale(0) rotate(-10deg)
      }

      12% {
        transform: scale(1.35) rotate(5deg)
      }

      22%,
      40% {
        transform: scale(1) rotate(0deg)
      }

      46% {
        transform: scale(1) translate(-16px, -9px) rotate(-12deg)
      }

      55% {
        transform: scale(1.08) translate(19px, -4px) rotate(11deg)
      }

      64% {
        transform: scale(.93) translate(-11px, 13px) rotate(-8deg)
      }

      73% {
        transform: scale(1.05) translate(13px, -11px) rotate(6deg)
      }

      82% {
        transform: scale(.97) translate(-5px, 5px) rotate(-3deg)
      }

      91% {
        transform: scale(1.02) translate(3px, -2px) rotate(1deg)
      }

      100% {
        transform: scale(1) translate(0, 0) rotate(0)
      }
    }

    @keyframes bhoSlash {
      0% { transform: rotate(var(--rot)) scaleX(0) scaleY(2); opacity: 0; filter: blur(2px); }
      30% { transform: rotate(var(--rot)) scaleX(1) scaleY(1); opacity: 1; filter: blur(0px); }
      100% { transform: rotate(var(--rot)) scaleX(1.5) scaleY(0); opacity: 0; filter: blur(4px); }
    }

    @keyframes bhoDmg {
      0% {
        transform: translateY(0) scale(.3);
        opacity: 0
      }

      15% {
        transform: translateY(-18px) scale(1.4);
        opacity: 1
      }

      42% {
        transform: translateY(-48px) scale(1);
        opacity: 1
      }

      72% {
        transform: translateY(-82px) scale(.9);
        opacity: .6
      }

      100% {
        transform: translateY(-130px) scale(.7);
        opacity: 0
      }
    }

    @keyframes bhoXp {
      0% {
        transform: translateY(0) scale(.3);
        opacity: 0
      }

      15% {
        transform: translateY(14px) scale(1.2);
        opacity: 1
      }

      42% {
        transform: translateY(36px) scale(1);
        opacity: 1
      }

      72% {
        transform: translateY(60px) scale(.9);
        opacity: .6
      }

      100% {
        transform: translateY(95px) scale(.7);
        opacity: 0
      }
    }

    /* ── Boss-retaliation cinematic (diagonal slash attack) ── */
    /* Damage number pops then flies down toward HP bar */
    @keyframes pveDmgFly {
      0% {
        transform: translateY(0) scale(.45);
        opacity: 0
      }

      13% {
        transform: translateY(-22px) scale(1.35);
        opacity: 1
      }

      35% {
        transform: translateY(-18px) scale(1.1);
        opacity: 1
      }

      88% {
        transform: translateY(105px) scale(.9);
        opacity: .3
      }

      100% {
        transform: translateY(120px) scale(.8);
        opacity: 0
      }
    }

    /* Gravestone rises from below */
    @keyframes pveGrave {
      0% {
        transform: translateY(55px);
        opacity: 0
      }

      55% {
        transform: translateY(-4px);
        opacity: 1
      }

      75%,
      100% {
        transform: translateY(0);
        opacity: 1
      }
    }

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

      50% {
        transform: scale(1.8) rotate(20deg);
        opacity: .5
      }

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

    @keyframes bossFloat {

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

      50% {
        transform: translateY(-3px)
      }
    }

    @keyframes bossDrift {

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

      25% {
        transform: translateY(-6px) translateX(3px)
      }

      50% {
        transform: translateY(-2px) translateX(-3px)
      }

      75% {
        transform: translateY(-8px) translateX(1px)
      }
    }

    @keyframes meScrollBounce {

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

      50% {
        transform: translateY(6px)
      }
    }

    .boss-idle {
      animation: bossFloat 3s ease-in-out infinite
    }

    .boss-tier {
      font-size: 12px;
      font-weight: 900;
      padding: 4px 12px;
      border-radius: 20px;
      display: inline-block;
      margin-bottom: 6px
    }

    @keyframes xpFloat {
      0% {
        opacity: 1;
        transform: translateY(0)
      }

      100% {
        opacity: 0;
        transform: translateY(-44px)
      }
    }

    @keyframes coinFloat {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1)
      }

      100% {
        opacity: 0;
        transform: translateY(-52px) scale(1.4)
      }
    }

    @keyframes confettiFall {
      0% {
        opacity: 1;
        transform: translateY(0) rotate(0)
      }

      100% {
        opacity: 0;
        transform: translateY(-80px) rotate(720deg)
      }
    }

    @keyframes slideAway {
      0% {
        opacity: 1;
        transform: scale(1) translateX(0)
      }

      100% {
        opacity: 0;
        transform: scale(0) translateX(80px)
      }
    }

    /* ── DAILY REWARD ── */
    @keyframes drSlideUp {
      0% {
        transform: translateY(-100vh) scale(0.8);
        opacity: 0
      }

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

    @keyframes drSlideDown {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1
      }

      100% {
        transform: translateY(100vh) scale(0.8);
        opacity: 0
      }
    }

    @keyframes drBagBounce {

      0%,
      100% {
        transform: translateY(0) scale(1)
      }

      40% {
        transform: translateY(-14px) scale(1.1)
      }

      70% {
        transform: translateY(-5px) scale(1.04)
      }
    }

    @keyframes drSwipeHint {

      0%,
      100% {
        transform: translateY(0);
        opacity: .6
      }

      50% {
        transform: translateY(-8px);
        opacity: 1
      }
    }

    @keyframes drCoinVolcano {
      0% {
        opacity: 1;
        transform: translate(var(--sx), var(--sy)) scale(1);
      }

      60% {
        opacity: 1;
        transform: translate(var(--mx), var(--my)) scale(1.2);
      }

      100% {
        opacity: 0;
        transform: translate(var(--ex), var(--ey)) scale(.7);
      }
    }

    #daily-reward-overlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(0, 0, 0, .7);
      backdrop-filter: blur(5px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #daily-reward-card {
      width: 90%;
      max-width: 360px;
      background: var(--white);
      border: 4px solid var(--brand);
      border-radius: 28px;
      padding: 40px 30px;
      text-align: center;
      animation: drSlideUp .6s cubic-bezier(.34, 1.56, .64, 1) both;
      position: relative;
      overflow: visible;
      user-select: none;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    }

    #daily-reward-card.slide-down {
      animation: drSlideDown .5s cubic-bezier(.55, 0, 1, .45) both;
    }

    .dr-bag {
      display: block;
      width: 90px;
      height: 90px;
      margin: 0 auto 6px;
      animation: drBagBounce 1.5s ease-in-out infinite;
      cursor: grab;
      image-rendering: pixelated;
    }

    .dr-swipe-hint {
      font-size: 14px;
      font-weight: 800;
      color: var(--gray);
      animation: drSwipeHint 1.8s ease-in-out infinite;
      margin-top: 18px;
      letter-spacing: .04em;
    }

    .dr-coin-particle {
      position: fixed;
      width: 28px;
      height: 28px;
      pointer-events: none;
      image-rendering: pixelated;
      animation: drCoinVolcano var(--dur) cubic-bezier(.2, .8, .4, 1) both;
      z-index: 9999;
    }

    @keyframes defeatIn {
      0% {
        opacity: 0;
        transform: scale(.6)
      }

      60% {
        transform: scale(1.06)
      }

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

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

      100% {
        transform: scale(2.5);
        opacity: 0
      }
    }

    @keyframes chestWiggle {

      0%,
      100% {
        transform: rotate(0) scale(1)
      }

      25% {
        transform: rotate(-8deg) scale(1.05)
      }

      75% {
        transform: rotate(8deg) scale(1.05)
      }
    }

    @keyframes chestShake {

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

      12% {
        transform: translate(-6px, -2px) rotate(-6deg)
      }

      25% {
        transform: translate(6px, 0) rotate(6deg)
      }

      38% {
        transform: translate(-5px, 1px) rotate(-4deg)
      }

      50% {
        transform: translate(5px, -1px) rotate(4deg)
      }

      62% {
        transform: translate(-3px, 1px) rotate(-2deg)
      }

      75% {
        transform: translate(3px, 0) rotate(2deg)
      }

      88% {
        transform: translate(-1px, 0) rotate(-1deg)
      }
    }

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

      30% {
        transform: scale(.82)
      }

      60% {
        transform: scale(1.08)
      }

      100% {
        transform: scale(1)
      }
    }

    @keyframes lidSwing {
      0% {
        transform: perspective(120px) rotateX(0deg)
      }

      100% {
        transform: perspective(120px) rotateX(-135deg)
      }
    }

    @keyframes itemRise {
      0% {
        transform: translateY(48px) scale(.5);
        opacity: 0
      }

      55% {
        transform: translateY(-14px) scale(1.15);
        opacity: 1
      }

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

    @keyframes shineRing {
      0% {
        transform: translate(-50%, -50%) scale(.2);
        opacity: 1
      }

      100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0
      }
    }

    .chest-img {
      image-rendering: pixelated;
      display: block;
      width: 100%;
      height: 100%
    }

    .chest-shine-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%);
      pointer-events: none;
      animation: shineRing .9s ease forwards
    }

    @keyframes itemPop {
      0% {
        opacity: 0;
        transform: scale(0) rotate(-10deg)
      }

      60% {
        transform: scale(1.1) rotate(3deg)
      }

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

    @keyframes lvGlow {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 0, .4)
      }

      50% {
        box-shadow: 0 0 0 12px rgba(255, 107, 0, 0)
      }
    }

    .xp-float-el {
      position: absolute;
      right: 10px;
      top: -4px;
      font-size: 13px;
      font-weight: 800;
      color: var(--brand);
      pointer-events: none;
      animation: xpFloat .9s ease forwards;
      z-index: 10
    }

    .coin-float-el {
      position: absolute;
      right: 40px;
      top: -4px;
      font-size: 14px;
      font-weight: 800;
      color: #CC9900;
      pointer-events: none;
      animation: coinFloat 1s ease forwards;
      z-index: 10
    }

    .confetti-p {
      position: absolute;
      border-radius: 2px;
      pointer-events: none;
      animation: confettiFall .9s ease forwards
    }

    .dmg-float {
      position: absolute;
      font-size: 18px;
      font-weight: 900;
      color: var(--red);
      pointer-events: none;
      animation: xpFloat .9s ease forwards;
      z-index: 30;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .3)
    }

    .fire-ring-el {
      position: absolute;
      border: 3px solid var(--brand);
      border-radius: 50%;
      pointer-events: none;
      animation: fireRing .5s ease forwards
    }

    /* ── PROOF CAMERA SHEET ── */
    .proof-back {
      position: absolute;
      inset: 0;
      z-index: 90;
      background: rgba(0, 0, 0, .85);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      touch-action: none
    }

    .proof-back.open {
      display: flex
    }

    .proof-sheet {
      width: 100%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
      flex: 1
    }

    .proof-viewfinder {
      width: 100%;
      aspect-ratio: 3/4;
      background: #000;
      border-radius: var(--radius);
      overflow: hidden;
      position: relative
    }

    .proof-viewfinder video {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .proof-viewfinder canvas {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none
    }

    .proof-viewfinder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none
    }

    .proof-capture-btn {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--brand);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin: 24px auto 0;
      box-shadow: 0 6px 0 var(--brand-dark);
      transition: all .2s;
      border: none
    }

    .proof-capture-btn:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 var(--brand-dark)
    }

    .proof-capture-video {
      border-radius: 16px
    }

    .proof-action-row {
      display: flex;
      gap: 16px;
      margin-top: 24px;
      justify-content: center;
      animation: proofSplit .3s ease-out forwards
    }

    @keyframes proofSplit {
      0% {
        transform: scale(0.8);
        opacity: 0;
        gap: 0
      }

      100% {
        transform: scale(1);
        opacity: 1;
        gap: 16px
      }
    }

    @keyframes proofMerge {
      0% {
        transform: scale(1);
        opacity: 1;
        gap: 16px
      }

      100% {
        transform: scale(0.8);
        opacity: 0;
        gap: 0
      }
    }

    .proof-action-out {
      animation: proofMerge .2s ease-in forwards !important
    }

    .proof-retake-btn {
      flex: 1;
      background: var(--white);
      color: var(--text);
      border: none;
      border-radius: 24px;
      padding: 16px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 0 var(--gray-mid);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all .1s
    }

    .proof-retake-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 var(--gray-mid)
    }

    .proof-submit-btn {
      flex: 1;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 16px;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 4px 0 var(--brand-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all .1s
    }

    .proof-submit-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 var(--brand-dark)
    }

    /* ── PROOF VIEWER (squad) ── */
    /* ── Proof viewer ── */
    .pv-back {
      position: absolute;
      inset: 0;
      z-index: 90;
      background: rgba(0, 0, 0, .85);
      display: none;
      touch-action: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      padding: 24px 4px;
      padding-top: env(safe-area-inset-top, 24px);
      padding-bottom: env(safe-area-inset-bottom, 24px);
      box-sizing: border-box
    }

    .pv-back.open {
      display: flex
    }

    .pv-cam-wrap {
      width: 100%;
      max-width: calc(100vw - 92px);
      aspect-ratio: 3/4;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      background: #000;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
      flex-shrink: 0;
      z-index: 2
    }

    .pv-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .pv-av {
      width: 42px;
      height: 78px;
      border-radius: 10px;
      flex-shrink: 0;
      border: 2px solid rgba(255, 255, 255, .8);
      background: var(--white);
      box-sizing: border-box;
      overflow: visible;
      image-rendering: pixelated
    }

    .pv-av-inner {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: visible;
      image-rendering: pixelated;
      position: relative
    }

    .pv-name {
      font-size: 14px;
      font-weight: 800;
      color: #fff;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .8)
    }

    .pv-goal {
      font-size: 12px;
      font-weight: 700;
      color: rgba(255, 255, 255, .85);
      margin-top: 3px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .5)
    }

    .pv-own-msg {
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      margin-top: 16px;
    }

    /* ── ME TAB REVAMP ── */
    .me-char-wrap {
      text-align: center;
      padding: 20px 0 16px;
      position: relative
    }

    .me-char-av {
      width: 100px;
      height: 100px;
      border-radius: 20px;
      overflow: hidden;
      margin: 0 auto 12px;
      border: 3px solid var(--brand);
      image-rendering: pixelated
    }

    .me-settings-btn {
      position: absolute;
      top: 20px;
      right: 0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--gray-light);
      border: 2px solid var(--gray-mid);
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer
    }

    .cos-slot-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 20px
    }

    .cos-slot-card {
      background: var(--gray-light);
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all .1s;
      box-shadow: 0 3px 0 var(--gray-mid)
    }

    .cos-slot-card:active {
      transform: translateY(3px);
      box-shadow: 0 0 0 var(--gray-mid)
    }

    .cos-slot-card.equipped {
      border-color: var(--brand);
      background: var(--brand-light);
      box-shadow: 0 3px 0 var(--brand)
    }

    .cos-slot-icon {
      font-size: 28px;
      width: 40px;
      text-align: center;
      flex-shrink: 0
    }

    .cos-slot-name {
      font-size: 11px;
      font-weight: 800;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .cos-slot-item {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-top: 2px
    }

    .me-stat-bar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 20px 0 14px
    }

    .me-stat-box {
      background: var(--gray-light);
      border: 2px solid var(--gray-mid);
      border-radius: var(--radius-sm);
      padding: 10px;
      text-align: center
    }

    .me-stat-val {
      font-size: 18px;
      font-weight: 900;
      color: var(--text)
    }

    .me-stat-lbl {
      font-size: 10px;
      font-weight: 800;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-top: 2px
    }

    .upg-btn {
      width: 100%;
      padding: 8px;
      border: none;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all .1s;
      box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
      cursor: pointer
    }

    .upg-btn:active {
      transform: translateY(3px);
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.15)
    }

    /* ── COSMETIC CARDS ── */
    .cos-card {
      border-radius: var(--radius-sm);
      border: 2.5px solid var(--gray-mid);
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      background: var(--white);
      position: relative;
      transition: transform .1s;
      box-shadow: 0 2px 0 var(--gray-mid)
    }

    .cos-card:active {
      transform: scale(.95)
    }

    .cos-card.equipped-badge::after {
      content: 'ON';
      position: absolute;
      top: 4px;
      right: 4px;
      background: var(--green);
      color: #fff;
      font-size: 7px;
      font-weight: 800;
      padding: 1px 4px;
      border-radius: 6px
    }

    .cos-card.common {
      border-color: #AFAFAF
    }

    .cos-card.rare {
      border-color: var(--blue);
      box-shadow: 0 2px 0 rgba(28, 176, 246, .3)
    }

    .cos-card.epic {
      border-color: var(--purple);
      box-shadow: 0 2px 0 rgba(206, 130, 255, .3)
    }

    .cos-card.legendary {
      border-color: var(--yellow);
      box-shadow: 0 2px 0 rgba(255, 217, 0, .4)
    }

    .cos-icon {
      font-size: 28px;
      margin-bottom: 5px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto
    }

    .cos-name {
      font-size: 9px;
      font-weight: 800;
      color: var(--text);
      line-height: 1.4
    }

    .cos-rarity {
      font-size: 8px;
      font-weight: 800;
      margin-top: 3px;
      letter-spacing: .3px
    }

    .cos-rarity.common {
      color: var(--gray)
    }

    .cos-rarity.rare {
      color: var(--blue)
    }

    .cos-rarity.epic {
      color: var(--purple)
    }

    .cos-rarity.legendary {
      color: #CC9900
    }

    .cos-price {
      font-size: 9px;
      font-weight: 800;
      color: #CC9900;
      margin-top: 2px
    }

    /* inv legendary */
    .inv-card.legendary {
      border-color: var(--yellow);
      box-shadow: 0 2px 0 rgba(255, 217, 0, .4)
    }

    .inv-rarity.legendary {
      color: #CC9900
    }

    /* ── Bag FAB ── */
    .bag-fab {
      position: absolute;
      bottom: 24px;
      left: 24px;
      width: 70px;
      height: 70px;
      border-radius: 35px;
      background: var(--brand);
      border: none;
      box-shadow: 0 4px 0 var(--brand-dark);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      transition: transform .1s, box-shadow .1s;
      color: #fff;
      font-size: 38px
    }

    .bag-fab:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 var(--brand-dark)
    }
    .bag-shrink {
      transform: scale(0.85) !important;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes jellyPop {
      0% { transform: scale(0.85); }
      40% { transform: scale(1.1); }
      70% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }
    .bag-jelly-pop {
      animation: jellyPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    /* ── Bag popup overlay + modal ── */
    .bag-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .48);
      z-index: 56;
      opacity: 0;
      transition: opacity .2s ease;
      pointer-events: none
    }

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

    .bag-modal {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(.93);
      width: min(91%, 420px);
      height: 480px;
      max-height: 75vh;
      border-radius: 20px;
      z-index: 57;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
      display: flex;
      flex-direction: column;
      opacity: 0;
      transition: transform .22s cubic-bezier(.34, 1.28, .64, 1), opacity .2s ease;
      pointer-events: none
    }

    .bag-modal.open {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      pointer-events: auto
    }

    .bag-modal-tab {
      flex: 1;
      padding: 11px 6px;
      font-size: 13px;
      font-weight: 800;
      color: var(--text-light);
      background: none;
      border: none;
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: color .15s, border-color .15s
    }

    .bag-modal-tab.on {
      color: var(--brand);
      border-bottom-color: var(--brand)
    }

    /* ── Bag item grid ── */
    .bag-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px
    }

    .bag-box {
      border-radius: 12px;
      border: 2.5px solid;
      padding: 10px 6px 8px;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: transform .1s
    }

    .bag-box:active {
      transform: scale(.92)
    }

    .bag-box.common {
      background: #F4F4F4;
      border-color: #AFAFAF
    }

    .bag-box.rare {
      background: #E6F4FD;
      border-color: #1CB0F6;
      box-shadow: 0 2px 0 rgba(28, 176, 246, .2)
    }

    .bag-box.epic {
      background: #F2E6FF;
      border-color: #CE82FF;
      box-shadow: 0 2px 0 rgba(206, 130, 255, .2)
    }

    .bag-box.legendary {
      background: #FFFBE0;
      border-color: #FFD700;
      box-shadow: 0 2px 0 rgba(255, 215, 0, .28)
    }

    .bag-cat {
      position: absolute;
      top: 5px;
      left: 6px;
      font-size: 10px;
      line-height: 1
    }

    .bag-qty-pill {
      position: absolute;
      top: 4px;
      right: 5px;
      font-size: 8px;
      font-weight: 900;
      background: var(--brand);
      color: #fff;
      border-radius: 10px;
      padding: 1px 5px;
      min-width: 16px
    }

    .bag-rar {
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: .3px;
      text-transform: uppercase;
      margin-top: 3px
    }

    .bag-rar.common {
      color: #999
    }

    .bag-rar.rare {
      color: #1CB0F6
    }

    .bag-rar.epic {
      color: #CE82FF
    }

    .bag-rar.legendary {
      color: #CC9900
    }

    .bag-eq-lbl {
      font-size: 7.5px;
      font-weight: 900;
      color: #58CC02;
      margin-top: 1px
    }

    /* ── Shop Slot Picker (1×4 stacked, centered, squad-card height) ── */
    .shop-slot-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center
    }

    .shop-slot-card {
      border-radius: var(--radius);
      padding: 14px 20px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .1s, box-shadow .1s;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      border: 2px solid var(--gray-mid);
      width: 100%;
      min-height: 96px;
      box-sizing: border-box;
      background: var(--white);
      box-shadow: 0 4px 0 var(--gray-mid)
    }

    .shop-slot-card:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 var(--gray-mid)
    }

    .shop-slot-card-icon {
      font-size: 36px;
      line-height: 1;
      flex-shrink: 0
    }

    .shop-slot-card-name {
      font-size: 14px;
      font-weight: 900;
      color: var(--text);
      flex: 1;
      text-align: left
    }

    .shop-slot-card-count {
      font-size: 15px;
      font-weight: 800;
      color: var(--text-light);
      white-space: nowrap
    }

    /* ── Shop Carousel ── */
    .shop-swipe-down-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 900;
      color: var(--brand);
      letter-spacing: .03em;
      margin-bottom: 6px;
      transition: font-size .2s ease, letter-spacing .2s ease, color .2s ease;
      animation: shopHintBob 2s ease-in-out infinite
    }

    @keyframes shopHintBob {

      0%,
      100% {
        transform: translateY(0);
        opacity: .85
      }

      50% {
        transform: translateY(4px);
        opacity: 1
      }
    }

    .shop-rar-section {
      margin-bottom: 10px
    }

    .shop-carousel-wrap {
      margin: 0 -16px;
      overflow: hidden;
      padding: 6px 0 10px
    }

    .shop-carousel-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px
    }

    .shop-card-center {
      width: 144px;
      height: 144px;
      flex-shrink: 0;
      border-radius: 16px;
      border: 2.5px solid;
      padding: 10px;
      cursor: pointer;
      position: relative;
      transition: transform .15s;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    .shop-card-center:active {
      transform: scale(.96)
    }

    .shop-card-side {
      width: 114px;
      height: 114px;
      flex-shrink: 0;
      border-radius: 14px;
      border: 2px solid;
      padding: 8px;
      cursor: pointer;
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .shop-card-side.left {
      transform: scale(.82);
      transform-origin: right center
    }

    .shop-card-side.right {
      transform: scale(.82);
      transform-origin: left center
    }

    .shop-card-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 46px;
      font-weight: 900;
      color: rgba(25, 25, 25, .95);
      pointer-events: none;
      line-height: 1;
      text-shadow: 0 1px 6px rgba(255, 255, 255, .9)
    }

    .shop-def-badge {
      position: absolute;
      top: 5px;
      right: 6px;
      font-size: 8px;
      font-weight: 900;
      border-radius: 6px;
      padding: 2px 5px;
      line-height: 1.5;
      background: rgba(255, 255, 255, .88)
    }

    .shop-rar-lbl {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      margin-bottom: 8px;
      padding-left: 1px
    }

    @keyframes shopCarouselSlide {
      0% {
        opacity: .25;
        transform: translateX(var(--slide-from, 40px))
      }

      60% {
        opacity: 1;
        transform: translateX(calc(var(--slide-from, 40px)*-.06))
      }

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

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

      65% {
        transform: scale(1.3);
        opacity: 1
      }

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

    /* ── PROOF CAMERA EXTRAS ── */
    .proof-video-mirrored {
      transform: scaleX(-1)
    }

    .proof-mode-row {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      background: rgba(0, 0, 0, .5);
      border-radius: 20px;
      padding: 4px;
      gap: 4px;
      z-index: 10
    }

    .proof-mode-btn {
      background: transparent;
      color: var(--gray);
      border: none;
      border-radius: 16px;
      padding: 8px 16px;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s;
      cursor: pointer
    }

    .proof-mode-btn.on {
      background: var(--brand);
      color: #fff
    }

    .proof-flip-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .5);
      border: none;
      color: #fff;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10
    }

    .proof-timer-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
      pointer-events: none;
      display: none
    }

    .proof-rec-dot {
      position: absolute;
      top: 12px;
      left: 12px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--red);
      display: none;
      animation: recBlink 1s ease infinite
    }

    @keyframes recBlink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0
      }
    }

    /* ── WALKTHROUGH ── */
    #walkthrough-layer { position: fixed; inset: 0; z-index: 10000; pointer-events: none; display: none; }
    .wt-overlay { position: absolute; background: transparent; box-shadow: 0 0 0 9999px rgba(0,0,0,0.7); border-radius: var(--radius); transition: all 0.3s; pointer-events: none; }
    .wt-hand-svg { position: absolute; width: 48px; height: 48px; z-index: 10001; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
    .wt-desc-box { position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 48px); max-width: 340px; background: var(--brand); color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); pointer-events: auto; z-index: 10001; }
    .wt-desc-header { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 10px; text-align: center; }
    .wt-desc-cols { display: flex; align-items: flex-start; gap: 2px; }
    .wt-desc-col { flex: 1; font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); text-align: center; line-height: 1.4; padding: 0 2px; }
    .wt-desc-sep { font-size: 18px; color: rgba(255,255,255,0.5); display: flex; align-items: center; flex-shrink: 0; padding-top: 2px; }
    .wt-desc-single { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.95); text-align: center; line-height: 1.5; }
    @keyframes wt-tap { 0%, 100% { transform: scale(1) rotate(-10deg); } 50% { transform: scale(0.85) rotate(-10deg) translateY(-10px); } }
    @keyframes wt-swipe-left { 0% { transform: translateX(40px) rotate(-10deg); opacity: 0; } 20% { transform: translateX(20px) rotate(-10deg); opacity: 1; } 80% { transform: translateX(-40px) rotate(-10deg); opacity: 1; } 100% { transform: translateX(-60px) rotate(-10deg); opacity: 0; } }
    @keyframes wt-swipe-right { 0% { transform: translateX(-40px) rotate(-10deg); opacity: 0; } 20% { transform: translateX(-20px) rotate(-10deg); opacity: 1; } 80% { transform: translateX(40px) rotate(-10deg); opacity: 1; } 100% { transform: translateX(60px) rotate(-10deg); opacity: 0; } }
    @keyframes wt-swipe-long-left { 0% { transform: translateX(38vw) rotate(-10deg); opacity: 0; } 15% { transform: translateX(25vw) rotate(-10deg); opacity: 1; } 80% { transform: translateX(-25vw) rotate(-10deg); opacity: 1; } 100% { transform: translateX(-38vw) rotate(-10deg); opacity: 0; } }
    @keyframes wt-swipe-long-right { 0% { transform: translateX(-38vw) rotate(-10deg); opacity: 0; } 15% { transform: translateX(-25vw) rotate(-10deg); opacity: 1; } 80% { transform: translateX(25vw) rotate(-10deg); opacity: 1; } 100% { transform: translateX(38vw) rotate(-10deg); opacity: 0; } }
    @keyframes wt-swipe-down { 0% { transform: translateY(-20px) rotate(-10deg); opacity: 0; } 20% { transform: translateY(0) rotate(-10deg); opacity: 1; } 75% { transform: translateY(50px) rotate(-10deg); opacity: 1; } 100% { transform: translateY(70px) rotate(-10deg); opacity: 0; } }
    .wt-anim-tap { animation: wt-tap 1.5s infinite; }
    .wt-anim-swipe-left { animation: wt-swipe-left 2s infinite; }
    .wt-anim-swipe-right { animation: wt-swipe-right 2s infinite; }
    .wt-anim-swipe-long-left { animation: wt-swipe-long-left 2.8s ease-in-out infinite; }
    .wt-anim-swipe-long-right { animation: wt-swipe-long-right 2.8s ease-in-out infinite; }
    .wt-anim-swipe-down { animation: wt-swipe-down 2s ease-in-out infinite; }
    .wt-fake-proof-btn { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 20px; background: var(--brand-light); border: 1.5px solid var(--brand); color: var(--brand); display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 0 var(--brand); pointer-events: none; position: absolute; white-space: nowrap; z-index: 10001; margin: 0; }

    .wt-blocker { position: absolute; inset: 0; pointer-events: auto; background: transparent; z-index: 1; }
    .wt-proxy { position: absolute; pointer-events: auto; cursor: pointer; background: transparent; z-index: 10002; }
    .wt-dummy-card { animation: wt-dummy-fade .35s ease-out; }
    @keyframes wt-dummy-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    @keyframes sosBellShake {
      0% { transform: rotate(-15deg); }
      100% { transform: rotate(15deg); }
    }
    @keyframes sosWaveLeft {
      0% { opacity: 0.1; transform: translateX(6px) scale(0.9); }
      100% { opacity: 1; transform: translateX(-2px) scale(1); }
    }
    @keyframes sosWaveRight {
      0% { opacity: 0.1; transform: translateX(-6px) scale(0.9); }
      100% { opacity: 1; transform: translateX(2px) scale(1); }
    }
  

      @keyframes nodePulse { 0%,100%{transform:scale(1);opacity:.22} 50%{transform:scale(1.45);opacity:.07} }
      @keyframes ringPulse { 0%,100%{transform:scale(1);stroke-opacity:.9;stroke-width:3} 50%{transform:scale(1.2);stroke-opacity:.35;stroke-width:7} }
      @keyframes chestShakeGlow { 
        0% { transform: rotate(0deg); filter: drop-shadow(0 0 4px #FFD900); }
        10% { transform: rotate(-10deg); filter: drop-shadow(0 0 12px #FFD900); }
        20% { transform: rotate(10deg); filter: drop-shadow(0 0 20px #FFD900); }
        30% { transform: rotate(-10deg); filter: drop-shadow(0 0 12px #FFD900); }
        40% { transform: rotate(0deg); filter: drop-shadow(0 0 4px #FFD900); }
        100% { transform: rotate(0deg); filter: drop-shadow(0 0 4px #FFD900); }
      }
      .cur-pulse-outer{transform-box:fill-box;transform-origin:center;animation:nodePulse 2s ease-in-out infinite}
      .cur-pulse-ring{transform-box:fill-box;transform-origin:center;animation:ringPulse 2s ease-in-out infinite}
    
@keyframes sqStoryPulse{0%{box-shadow:0 0 0px var(--brand)}50%{box-shadow:0 0 16px var(--brand), 0 0 8px var(--brand)}100%{box-shadow:0 0 0px var(--brand)}} @keyframes sqPendingPulse{0%{box-shadow:0 0 0px #FF6B00}50%{box-shadow:0 0 16px #FF6B00, 0 0 8px #FF6B00}100%{box-shadow:0 0 0px #FF6B00}} @keyframes sqKnockedPulse{0%{box-shadow:0 0 0px var(--red)}50%{box-shadow:0 0 16px var(--red), 0 0 8px var(--red)}100%{box-shadow:0 0 0px var(--red)}} @keyframes sqSelectedHover{0%,100%{transform:scale(1.05) translateY(0)}50%{transform:scale(1.05) translateY(-6px)}}

        @keyframes skullHover {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-10px); }
        }
      
.shop-carousel-wrap { touch-action: pan-y !important; }
.shop-card-center img, .shop-card-side img { pointer-events: none; }