/* DIJANA bina_wira_tasawwur.py daripada gaya asal Wira Tasawwur (Apps Script). Jangan sunting terus. */

    .wt {
      --bg: #101b16;
      --panel: #1a2b22;
      --panel2: #22372b;
      --line: #3c5141;
      --text: #f3f5eb;
      --muted: #bbc9b9;
      --gold: #efc76c;
      --green: #a7da95;
      --red: #ffb4a9;
      --radius: 20px;
      --shadow: 0 14px 38px #0003;
    }


    .wt * { box-sizing: border-box; }


    .wt {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(ellipse at top right, #3b4b2833, transparent 50%),
        linear-gradient(135deg, #101b16, #17271f);
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      font-size: 1em;
      line-height: 1.65;
      min-height: 100vh;
    }


    .wt button, .wt input, .wt select { font: inherit; }

    .wt button { cursor: pointer; }

    .wt button:disabled { cursor: wait; opacity: .55; }


    .wt button, .wt input, .wt select, .wt a {
      -webkit-tap-highlight-color: transparent;
    }


    .wt :focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 4px;
    }


    .wt h1, .wt h2, .wt h3, .wt p { margin-top: 0; }

    .wt h1 { line-height: 1.1; font-size: clamp(1.8889em, 7vw, 3.5556em); }

    .wt h2 { line-height: 1.25; font-size: clamp(1.3889em, 4vw, 1.8889em); }

    .wt h3 { line-height: 1.35; font-size: 1.2222em; }

    .wt small { font-size: 0.8333em; }

    .wt [hidden] { display: none !important; }


    .wt .shell { width: min(1120px, 100% - 32px); margin: auto; }


    .wt header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: #101b16f2;
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }


    .wt .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 80px;
    }


    .wt .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
      background: transparent;
      border: 0;
      text-align: left;
      padding: 8px 0;
    }


    .wt .brand strong { display: block; letter-spacing: 2px; }

    .wt .brand small { color: var(--gold); display: block; }


    .wt .shield {
      display: grid;
      place-items: center;
      width: 48px;
      height: 56px;
      background: var(--gold);
      color: #17271f;
      clip-path: polygon(0 0,100% 0,100% 65%,50% 100%,0 65%);
      font-size: 1.5556em;
      flex-shrink: 0;
    }


    .wt .wt-main { padding: 28px 0 48px; min-height: 70vh; }


    .wt .nav {
      display: flex;
      overflow-x: auto;
      gap: 8px;
      padding: 14px 0 4px;
      scrollbar-width: thin;
    }


    .wt .nav button {
      flex-shrink: 0;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      border-radius: 12px;
      padding: 10px 16px;
      min-height: 48px;
    }


    .wt .nav button.active {
      background: var(--gold);
      color: #17271f;
      border-color: var(--gold);
      font-weight: 800;
    }


    .wt .card {
      background: linear-gradient(140deg, #24382be6, #19291fe6);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: clamp(20px, 4vw, 30px);
      box-shadow: var(--shadow);
      margin-bottom: 20px;
      overflow-wrap: anywhere;
    }


    .wt .hero {
      position: relative;
      overflow: hidden;
      padding: clamp(26px, 6vw, 54px);
    }


    .wt .hero > * { position: relative; z-index: 1; }


    .wt .hero::after {
      content: "";
      position: absolute;
      width: 320px;
      height: 320px;
      right: -90px;
      top: -90px;
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle,
          transparent 0 34px, #efc76c20 35px 36px),
        conic-gradient(from 30deg, transparent 75%, #a7da951a);
      pointer-events: none;
    }


    .wt .eyebrow {
      color: var(--gold);
      letter-spacing: 2px;
      font-size: 0.7778em;
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 12px;
    }


    .wt .muted { color: var(--muted); }

    .wt .gold { color: var(--gold); }

    .wt .success { color: var(--green); }

    .wt .danger { color: var(--red); }

    .wt .center { text-align: center; }


    .wt .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }


    .wt .actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 20px;
    }


    .wt .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
      gap: 18px;
    }


    .wt .grid .card { margin-bottom: 0; }

    .wt .stack { display: grid; gap: 16px; }


    .wt .btn {
      background: var(--gold);
      color: #17271f;
      font-weight: 800;
      border: 1px solid var(--gold);
      padding: 12px 20px;
      border-radius: 12px;
      min-height: 50px;
    }


    .wt .btn.secondary {
      background: #ffffff08;
      color: var(--text);
      border-color: var(--line);
    }


    .wt .btn.danger-btn {
      background: #5d292a;
      color: #fff;
      border-color: #91504e;
    }


    .wt .full { width: 100%; }


    .wt label { display: block; font-weight: 650; }

    .wt label > span { display: block; margin-bottom: 7px; }


    .wt input, .wt select {
      width: 100%;
      background: #101c15;
      color: var(--text);
      border: 1px solid #71826b;
      border-radius: 12px;
      padding: 12px;
      min-height: 50px;
    }


    .wt input[type="range"] { padding: 0; min-height: 32px; }


    .wt .field { margin-bottom: 16px; }


    .wt .notice {
      border-left: 4px solid var(--gold);
      padding: 14px 18px;
      background: #efc76c0b;
      border-radius: 0 12px 12px 0;
      margin: 16px 0;
    }


    .wt .pill {
      display: inline-block;
      background: #0e1c14;
      border: 1px solid var(--line);
      color: var(--muted);
      border-radius: 99px;
      padding: 5px 12px;
      font-size: 0.8333em;
      margin: 3px;
    }


    .wt .avatar {
      width: 80px;
      height: 80px;
      display: grid;
      place-items: center;
      border: 2px solid var(--gold);
      border-radius: 22px;
      background: #0f2017;
      font-size: 2.3333em;
      flex-shrink: 0;
    }


    .wt .profile-heading {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 20px;
    }


    .wt .profile-heading h2 { margin: 0; }

    .wt .stat strong { display: block; font-size: 1.8889em; color: var(--gold); }

    .wt .stat span { color: var(--muted); }


    .wt progress {
      appearance: none;
      width: 100%;
      height: 12px;
      overflow: hidden;
      border: 0;
      border-radius: 99px;
      background: #0b1710;
    }


    .wt progress::-webkit-progress-bar { background: #0b1710; }

    .wt progress::-webkit-progress-value { background: var(--gold); border-radius: 99px; }

    .wt progress::-moz-progress-bar { background: var(--gold); }


    .wt .theme {
      border-left: 3px solid var(--gold);
      padding-left: 20px;
      margin: 26px 0;
    }


    .wt .lesson-number {
      font-size: 0.7778em;
      letter-spacing: 1px;
      color: var(--gold);
      font-weight: 800;
    }


    .wt .locked { opacity: .72; }

    .wt .stars { color: var(--gold); font-size: 1.3889em; letter-spacing: 4px; }


    .wt .option {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      width: 100%;
      padding: 18px;
      border: 1px solid #71826b;
      border-radius: 14px;
      background: #17271f;
      color: var(--text);
      text-align: left;
      min-height: 64px;
    }


    .wt .option:hover:not(:disabled) {
      border-color: var(--gold);
      background: #30422c;
    }


    .wt .option .letter {
      display: grid;
      place-items: center;
      background: #ffffff0e;
      border-radius: 8px;
      min-width: 32px;
      height: 32px;
      font-weight: 800;
      color: var(--gold);
    }


    .wt .option.correct { border-color: var(--green); background: #25412b; }

    .wt .option.wrong { border-color: var(--red); background: #4a2d29; }

    .wt .option:disabled { opacity: 1; cursor: default; }


    .wt .feedback {
      margin-top: 22px;
      border: 1px solid var(--line);
      padding: 20px;
      border-radius: 16px;
      background: #0d1b13;
    }


    .wt .timer {
      font-variant-numeric: tabular-nums;
      font-size: 1.2778em;
      color: var(--gold);
      font-weight: 800;
    }


    .wt .table-wrap { overflow-x: auto; }


    .wt table { border-collapse: collapse; width: 100%; min-width: 620px; }


    .wt th, .wt td {
      padding: 14px 12px;
      text-align: left;
      border-bottom: 1px solid var(--line);
    }


    .wt th { font-size: 0.8333em; color: var(--muted); }

    .wt tr.me { background: #efc76c0c; }

    .wt .badge-locked { filter: grayscale(1); opacity: .6; }


    .wt details {
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }


    .wt summary { cursor: pointer; font-weight: 700; }

    .wt details p { margin: 12px 0 0; }


    .wt footer {
      border-top: 1px solid var(--line);
      padding: 28px 20px;
      text-align: center;
      color: var(--muted);
      font-size: 0.8333em;
    }


    .wt #busy {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #f3f5eb;
      color: #17271f;
      padding: 14px 20px;
      border-radius: 14px;
      box-shadow: var(--shadow);
      max-width: calc(100% - 24px);
    }


    .wt .spinner {
      width: 20px;
      height: 20px;
      border: 3px solid #17271f33;
      border-top-color: #17271f;
      border-radius: 50%;
      animation: spin .8s linear infinite;
      flex-shrink: 0;
    }


    .wt #toast {
      position: fixed;
      top: 90px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gold);
      color: #17271f;
      padding: 15px 22px;
      border-radius: 14px;
      z-index: 110;
      max-width: min(600px, calc(100% - 24px));
      font-weight: 750;
      box-shadow: var(--shadow);
    }


    .wt dialog {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 20px;
      max-width: min(540px, calc(100% - 28px));
      padding: 28px;
    }


    .wt dialog::backdrop { background: #000b; }

    .wt .recovery { font: bold 1.2222em monospace; letter-spacing: 2px; overflow-wrap: anywhere; }


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


    @media (max-width: 600px) {
      .wt .shell { width: min(100% - 22px, 1120px); }

      .wt .brand strong { font-size: 0.8889em; }

      .wt .brand small { font-size: 0.6667em; }

      .wt .header-inner { gap: 8px; }

      .wt .header-inner .btn { padding: 9px 12px; font-size: 0.8889em; }

      .wt .theme { padding-left: 12px; }

      .wt .profile-heading { align-items: flex-start; }

      .wt .avatar { width: 62px; height: 62px; font-size: 1.7778em; }

      .wt .actions .btn { flex-grow: 1; }

    }


    @media (prefers-reduced-motion: reduce) {
      .wt *, .wt *::before, .wt *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }

    }

  

.wt .cert-modal {
  width: min(850px, calc(100vw - 24px));
  background: #ffffff;
  color: #111111;
  padding: 24px;
  border-radius: 16px;
  border: 6px solid #8a6318;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}

.wt .cert-frame {
  border: 2px solid #222222;
  padding: 28px 20px;
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #fffdf7;
}

.wt .cert-header h3 { font-size: 0.7778em; color: #555; margin-bottom: 5px; font-weight: normal; letter-spacing: 1px; }

.wt .cert-header h1 { font-size: 1.4444em; color: #8a6318; margin: 5px 0 15px; text-transform: uppercase; letter-spacing: 2px; }

.wt .cert-body { margin: 20px 0; line-height: 1.6; }

.wt .cert-name { font-size: 1.3333em; font-weight: bold; color: #000; text-decoration: underline; margin: 12px 0; }

.wt .cert-stats { display: flex; justify-content: center; gap: 15px; margin: 20px 0; font-family: sans-serif; }

.wt .cert-stat-box { background: #f4eee1; border: 1px solid #d4c39e; padding: 10px 18px; border-radius: 8px; font-size: 0.7778em; }

.wt .cert-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 35px; padding-top: 15px; border-top: 1px solid #ccc; font-family: sans-serif; font-size: 0.7222em; text-align: left; }


@media print {
  body * { visibility: hidden; }

  #certModal, #certModal * { visibility: visible; }

  #certModal { position: absolute; left: 0; top: 0; width: 100%; border: 4px solid #8a6318; box-shadow: none; margin: 0; padding: 10px; }

  .wt .no-print { display: none !important; }

}


 
.wt .minigame-container {
  background: #0f1c15;
  border: 2px solid #5d754e;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin: 15px 0;
}

.wt .minigame-canvas {
  width: 100%;
  max-width: 500px;
  height: 220px;
  background: #192b20;
  border: 2px dashed #7a936a;
  border-radius: 12px;
  margin: 15px auto;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.wt .target-disk {
  position: absolute;
  width: 46px;
  height: 46px;
  background: radial-gradient(circle, #ff5252 35%, #ffffff 40%, #ff5252 70%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.wt .meter-bar {
  width: 85%;
  height: 26px;
  background: #222;
  margin: 90px auto 0;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  border: 2px solid #aaa;
}

.wt .meter-target { position: absolute; left: 65%; width: 20%; height: 100%; background: #4caf50; }

.wt .meter-pointer { position: absolute; width: 8px; height: 100%; background: #ffeb3b; left: 0%; }



  .wt {
    --panel: #1b2b22;
    --panel2: #293d2c;
    --line: #536345;
    --gold: #f5ce77;
    --green: #b2e69e;
  }


  .wt {
    background:
      radial-gradient(
        ellipse at 10% 0%,
        rgba(159, 177, 98, .14),
        transparent 48%
      ),
      radial-gradient(
        ellipse at 90% 30%,
        rgba(229, 183, 86, .07),
        transparent 40%
      ),
      repeating-linear-gradient(
        0deg,
        transparent 0 49px,
        rgba(190, 212, 160, .025) 50px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0 49px,
        rgba(190, 212, 160, .025) 50px
      ),
      #0d1812;
  }


  .wt header {
    background: rgba(12, 23, 17, .97);
    border-bottom: 1px solid #66794b;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, .3),
      inset 0 -1px 0 rgba(255, 255, 255, .05);
  }


  .wt .header-inner {
    min-height: 70px;
  }


  .wt .header-controls-v2 {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
  }


  .wt .header-controls-v2 .btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.8333em;
  }


  .wt .shield {
    background:
      linear-gradient(
        135deg,
        #ffe8a7,
        #dbaf4e 45%,
        #94702d
      );
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .4));
  }


  .wt .card {
    position: relative;
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, .045),
        transparent 32%
      ),
      linear-gradient(
        145deg,
        #2b3d2d,
        #1b2b21 55%,
        #15231b
      );

    border: 1px solid #536348;
    border-top-color: #7d8c65;
    border-bottom-color: #101b13;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      inset 0 -2px 0 rgba(0, 0, 0, .25),
      0 7px 0 #0b150f,
      0 18px 30px rgba(0, 0, 0, .28);
  }


  .wt .hero {
    background:
      radial-gradient(
        ellipse at 90% 20%,
        rgba(212, 190, 94, .15),
        transparent 50%
      ),
      repeating-linear-gradient(
        145deg,
        rgba(0, 0, 0, .025) 0 16px,
        rgba(255, 255, 255, .012) 16px 32px
      ),
      linear-gradient(
        135deg,
        #364832,
        #1a2b20 65%
      );
  }


  .wt .hero::after {
    width: 360px;
    height: 360px;
    border: 1px solid rgba(213, 220, 147, .2);
    box-shadow:
      0 0 0 18px rgba(14, 30, 18, .22),
      0 0 0 20px rgba(218, 226, 158, .07),
      inset 0 0 45px rgba(0, 0, 0, .45);
  }


  .wt .hero h1, .wt .hero h2 {
    text-shadow:
      0 2px 0 #101b12,
      0 6px 14px rgba(0, 0, 0, .3);
  }


  .wt .btn {
    background: linear-gradient(
      180deg,
      #ffe6a2,
      #e8bd5f
    );

    border-color: #ffe5a2 #c09a4a #8c682b;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .5),
      0 4px 0 #806025,
      0 6px 10px rgba(0, 0, 0, .2);

    transition:
      transform .15s ease,
      box-shadow .15s ease;
  }


  .wt .btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }


  .wt .btn:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #806025;
  }


  .wt .btn.secondary {
    background: linear-gradient(
      180deg,
      #334633,
      #243426
    );

    border-color: #6e805b #4b6043 #172418;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 4px 0 #101c13;
  }


  .wt .option {
    background: linear-gradient(
      135deg,
      #2b3d2d,
      #1a2a20
    );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .06),
      0 4px 0 #0c1710;

    transition:
      border-color .15s ease,
      transform .15s ease;
  }


  .wt .option:hover:not(:disabled) {
    transform: translateY(-2px);
  }


  .wt .option.correct {
    background: linear-gradient(
      135deg,
      #3e6237,
      #203d26
    );

    box-shadow:
      0 0 0 1px #a7da95,
      0 5px 0 #122716,
      0 0 18px rgba(133, 219, 114, .13);
  }


  .wt .option.wrong {
    background: linear-gradient(
      135deg,
      #633d35,
      #38251f
    );
  }


  .wt .avatar {
    background:
      radial-gradient(
        circle at 30% 20%,
        rgba(255, 230, 153, .18),
        transparent 60%
      ),
      linear-gradient(
        145deg,
        #344731,
        #101e15
      );

    border: 2px solid #ddbd68;

    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, .13),
      inset 0 -5px 10px rgba(0, 0, 0, .4),
      0 5px 0 #0d160f,
      0 10px 18px rgba(0, 0, 0, .3);

    text-shadow: 0 5px 6px rgba(0, 0, 0, .45);
  }


  .wt .theme {
    border-left: 3px solid #b39651;
    position: relative;
  }


  .wt .theme > .eyebrow::before {
    content: "◆ ";
    color: #ffe2a0;
  }


  .wt .lesson-number {
    display: inline-block;
    padding: 4px 10px;
    background: #0e1c13;
    border: 1px solid #576547;
    border-radius: 7px;
    margin-bottom: 10px;
  }


  .wt .nav {
    padding: 10px 0;
  }


  .wt .nav button {
    min-height: 42px;
    padding: 7px 13px;
    font-size: 0.8889em;
  }


   

  .wt #playerHudV2 {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    padding: 12px 16px;
    margin: 0 0 2px;

    border: 1px solid #6a7549;
    border-radius: 15px;

    background:
      linear-gradient(
        110deg,
        #35472d,
        #21321f 55%,
        #18251c
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .1),
      0 4px 0 #08110b;
  }


  .wt .hud-person-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }


  .wt .hud-avatar-v2 {
    width: 48px;
    height: 48px;
    font-size: 1.5556em;

    display: grid;
    place-items: center;

    flex-shrink: 0;
    border-radius: 13px;
    border: 1px solid #e0c37c;

    background: linear-gradient(
      145deg,
      #526042,
      #1d2c1b
    );

    box-shadow:
      inset 0 1px 0 #ffffff20,
      0 3px 0 #0c170d;
  }


  .wt .hud-identity-v2 {
    min-width: 0;
  }


  .wt #hudNameV2 {
    display: block;
    font-size: 0.9444em;
    line-height: 1.3;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .wt #hudRankV2 {
    display: block;
    color: #ffe2a0;
    font-size: 0.8333em;
    font-weight: 800;
    line-height: 1.4;
  }


  .wt #hudNextV2 {
    display: block;
    color: #c4d0b6;
    font-size: 0.6667em;
    line-height: 1.4;
  }


  .wt .hud-numbers-v2 {
    display: flex;
    gap: 9px;
    align-items: stretch;
    text-align: center;
  }


  .wt .hud-counter-v2 {
    min-width: 82px;
    padding: 5px 10px;

    border-radius: 10px;
    border: 1px solid #65704a;

    background: linear-gradient(
      180deg,
      #0e1c12,
      #1a2c1b
    );
  }


  .wt .hud-counter-v2 strong {
    display: block;
    font-size: 1.3333em;
    line-height: 1.25;
    color: #ffe1a0;
    font-variant-numeric: tabular-nums;
  }


  .wt .hud-counter-v2 small {
    display: block;
    font-size: 0.6111em;
    color: #c3d1b6;
  }


  .wt .hud-counter-v2.session {
    border-color: #94be71;
  }


  .wt .hud-counter-v2.session strong {
    color: #c1f3a6;
  }


  .wt #hudProgressV2 {
    grid-column: 1 / -1;
    height: 6px;
    margin: 0;
  }


  .wt #xpBurstV2 {
    position: absolute;
    right: 15px;
    top: -9px;
    z-index: 5;

    padding: 7px 14px;

    background: linear-gradient(
      135deg,
      #fff1b1,
      #eac162
    );

    border: 1px solid #fff5c4;
    border-radius: 12px;

    color: #172410;
    font-size: 1.0556em;
    font-weight: 900;

    box-shadow: 0 8px 22px #0006;
    pointer-events: none;
  }


  .wt #xpBurstV2.pop-v2 {
    animation: xpPopV2 2.4s ease both;
  }


  .wt #playerHudV2.flash-v2 {
    animation: hudFlashV2 .7s ease;
  }


  @keyframes xpPopV2 {
    0% {
      opacity: 0;
      transform: translateY(12px) scale(.85);
    }

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

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


  @keyframes hudFlashV2 {
    40% {
      border-color: #ffe5a0;
      box-shadow:
        0 0 22px #eac16a55,
        inset 0 0 15px #eac16a20;
    }
  }


   

  .wt .avatar-picker-v2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 22px;
  }


  .wt .avatar-choice-v2 {
    min-width: 0;
    min-height: 90px;

    padding: 10px 5px;

    border: 1px solid #60714d;
    border-radius: 14px;

    background: linear-gradient(
      145deg,
      #344631,
      #18271c
    );

    color: var(--text);

    box-shadow:
      inset 0 1px 0 #ffffff10,
      0 4px 0 #0d180f;

    transition: transform .15s ease;
  }


  .wt .avatar-choice-v2 span {
    display: block;
    font-size: 1.7222em;
    line-height: 1.4;
    filter: drop-shadow(0 4px 3px #0005);
  }


  .wt .avatar-choice-v2 small {
    display: block;
    font-size: 0.6667em;
    line-height: 1.3;
  }


  .wt .avatar-choice-v2.selected {
    border: 2px solid #f5cf78;

    background: linear-gradient(
      145deg,
      #5f6135,
      #26371f
    );

    box-shadow:
      0 0 0 2px #f5cf781c,
      0 4px 0 #0d180f;
  }


  .wt .avatar-choice-v2:hover {
    transform: translateY(-2px);
  }


   

  .wt #toast {
    top: auto;
    bottom: 85px;
  }


   

  .wt.focus-v2 .brand small, .wt.focus-v2 #nav, .wt.focus-v2 footer {
    display: none !important;
  }


  .wt.focus-v2 .header-inner {
    min-height: 52px;
  }


  .wt.focus-v2 .wt-main {
    padding-top: 18px;
  }


  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .wt .grid > .card {
      transition:
        transform .18s ease,
        box-shadow .18s ease;
    }


    .wt .grid > .card:hover {
      transform: translateY(-3px);

      box-shadow:
        inset 0 1px 0 #ffffff15,
        0 9px 0 #0b150f,
        0 24px 35px #0005;
    }

  }


  @media (max-width: 600px) {
    .wt .header-inner {
      gap: 6px;
    }


    .wt .brand {
      gap: 7px;
    }


    .wt .brand .shield {
      width: 34px;
      height: 40px;
      font-size: 1.2222em;
    }


    .wt .brand strong {
      font-size: 0.7222em;
      letter-spacing: 1px;
    }


    .wt .brand small {
      font-size: 0.5em;
    }


    .wt .header-controls-v2 {
      gap: 5px;
    }


    .wt .header-controls-v2 .btn {
      font-size: 0.6667em;
      padding: 7px 8px;
      min-height: 40px;
    }


    .wt #playerHudV2 {
      gap: 8px;
      padding: 9px 10px;
    }


    .wt .hud-person-v2 {
      gap: 8px;
    }


    .wt .hud-avatar-v2 {
      width: 38px;
      height: 42px;
      font-size: 1.3333em;
    }


    .wt #hudNameV2 {
      font-size: 0.7778em;
    }


    .wt #hudRankV2 {
      font-size: 0.6667em;
    }


    .wt #hudNextV2 {
      font-size: 0.5556em;
    }


    .wt .hud-numbers-v2 {
      gap: 5px;
    }


    .wt .hud-counter-v2 {
      min-width: 58px;
      padding: 5px 6px;
    }


    .wt .hud-counter-v2 strong {
      font-size: 1.0556em;
    }


    .wt .hud-counter-v2 small {
      font-size: 0.5em;
    }


    .wt .nav {
      gap: 6px;
    }


    .wt .nav button {
      font-size: 0.7778em;
      padding: 6px 10px;
      min-height: 38px;
    }

  }


  @media (max-width: 360px) {
    .wt .hud-avatar-v2 {
      display: none;
    }


    .wt .brand small {
      display: none;
    }

  }


  @media (prefers-reduced-motion: reduce) {
    .wt #xpBurstV2.pop-v2 {
      animation: none;
      opacity: 1;
    }


    .wt .grid > .card:hover, .wt .avatar-choice-v2:hover, .wt .btn:hover, .wt .option:hover {
      transform: none;
    }

  }



  .wt #nav.wira-menu-v3 {
    display: flex;
    align-items: stretch;
    gap: 10px;

    padding: 14px 3px 16px;
    margin: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #8d9b61 transparent;
  }


  .wt #nav.wira-menu-v3::-webkit-scrollbar {
    height: 4px;
  }


  .wt #nav.wira-menu-v3::-webkit-scrollbar-thumb {
    background: #8d9b61;
    border-radius: 99px;
  }


  .wt #nav.wira-menu-v3 .wira-menu-item {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    flex: 1 0 126px;
    min-width: 126px;
    min-height: 94px;

    padding: 11px 10px;
    margin: 0;

    border: 1px solid #596b4c;
    border-top-color: #8a9970;
    border-bottom-color: #182617;
    border-radius: 15px;

    background:
      radial-gradient(
        ellipse at top,
        rgba(170, 193, 123, .14),
        transparent 70%
      ),
      linear-gradient(
        145deg,
        #344931,
        #1b2c20 65%,
        #142319
      );

    color: #dce7cf;
    text-align: center;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .1),
      0 5px 0 #0a150d,
      0 8px 12px rgba(0, 0, 0, .22);

    scroll-snap-align: center;
    touch-action: pan-x pan-y;

    transition:
      transform .18s ease,
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
  }


   
  .wt #nav.wira-menu-v3 .wira-menu-item::before {
    content: "";

    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;

    background: linear-gradient(
      90deg,
      transparent,
      #e4edb96b,
      transparent
    );

    pointer-events: none;
  }


   
  .wt #nav.wira-menu-v3 .wira-menu-item::after {
    content: "";

    position: absolute;
    bottom: 5px;
    width: 24px;
    height: 3px;

    border-radius: 99px;
    background: transparent;

    transition:
      width .2s ease,
      background .2s ease;
  }


  .wt #nav.wira-menu-v3 .wira-menu-icon {
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;

    width: 40px;
    height: 36px;

    font-size: 1.6111em;
    line-height: 1;

    filter: drop-shadow(
      0 4px 3px rgba(0, 0, 0, .45)
    );

    transition: transform .18s ease;
  }


  .wt #nav.wira-menu-v3 .wira-menu-label {
    position: relative;
    z-index: 1;

    font-size: 0.8333em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .2px;

    white-space: nowrap;
  }


  .wt #nav.wira-menu-v3 .wira-menu-caption {
    position: relative;
    z-index: 1;

    font-size: 0.5556em;
    line-height: 1.2;
    color: #b6c6a7;

    white-space: nowrap;
  }


   
  .wt #nav.wira-menu-v3 .wira-menu-item.active {
    color: #fff2c3;

    border-color: #f4d381;
    border-bottom-color: #a47c33;

    background:
      radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 225, 139, .22),
        transparent 75%
      ),
      linear-gradient(
        145deg,
        #655936,
        #3e4228 55%,
        #27351f
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 236, 173, .4),
      0 5px 0 #665022,
      0 0 16px rgba(242, 201, 105, .13);
  }


  .wt #nav.wira-menu-v3 .wira-menu-item.active::after {
    width: 34px;
    background: #ffe19a;
    box-shadow: 0 0 8px #ffe19a80;
  }


  .wt #nav.wira-menu-v3 .wira-menu-item.active
  .wira-menu-caption {
    color: #e8d69b;
  }


  .wt #nav.wira-menu-v3 .wira-menu-item:focus-visible {
    outline: 3px solid #fff0ad;
    outline-offset: 3px;
  }


  .wt #nav.wira-menu-v3 .wira-menu-item:active {
    transform: translateY(4px);
    box-shadow:
      inset 0 1px 0 #ffffff15,
      0 1px 0 #0a150d;
  }


   
  .wt #nav.wira-menu-v3 .wira-menu-ripple {
    position: absolute;
    z-index: 0;

    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;

    border-radius: 50%;
    background: rgba(255, 230, 153, .32);

    pointer-events: none;
    animation: wiraMenuRipple .5s ease-out forwards;
  }


  @keyframes wiraMenuRipple {
    from {
      transform: scale(1);
      opacity: .8;
    }

    to {
      transform: scale(22);
      opacity: 0;
    }
  }


  @media (hover: hover) {
    .wt #nav.wira-menu-v3 .wira-menu-item:hover {
      transform: translateY(-2px);
      border-color: #b0c080;

      box-shadow:
        inset 0 1px 0 #ffffff20,
        0 7px 0 #0a150d,
        0 10px 20px #0004;
    }


    .wt #nav.wira-menu-v3 .wira-menu-item:hover
    .wira-menu-icon {
      transform: translateY(-2px) scale(1.1);
    }


    .wt #nav.wira-menu-v3 .wira-menu-item.active:hover {
      border-color: #ffe5a1;
    }

  }


  @media (max-width: 600px) {
    .wt #nav.wira-menu-v3 {
      gap: 8px;
      padding: 11px 2px 13px;
    }


    .wt #nav.wira-menu-v3 .wira-menu-item {
      flex: 0 0 100px;
      min-width: 100px;
      min-height: 82px;

      padding: 8px 6px;
      gap: 4px;
      border-radius: 13px;
    }


    .wt #nav.wira-menu-v3 .wira-menu-icon {
      width: 34px;
      height: 30px;
      font-size: 1.4444em;
    }


    .wt #nav.wira-menu-v3 .wira-menu-label {
      font-size: 0.7222em;
    }


    .wt #nav.wira-menu-v3 .wira-menu-caption {
      font-size: 0.5em;
    }

  }


  @media (prefers-reduced-motion: reduce) {
    .wt #nav.wira-menu-v3 .wira-menu-item, .wt #nav.wira-menu-v3 .wira-menu-icon {
      transition: none;
    }


    .wt #nav.wira-menu-v3 .wira-menu-item:hover, .wt #nav.wira-menu-v3 .wira-menu-item:active, .wt #nav.wira-menu-v3 .wira-menu-item:hover
    .wira-menu-icon {
      transform: none;
    }


    .wt #nav.wira-menu-v3 .wira-menu-ripple {
      display: none;
    }

  }



  .wt4-map {
    overflow-x: auto;
    border: 1px solid #547962;
    border-radius: 18px;
    background:
      radial-gradient(ellipse at center, #254747, #10282e);
    box-shadow: inset 0 0 60px #0005;
  }


  .wt4-map svg {
    display: block;
    width: 100%;
    min-width: 620px;
    height: auto;
  }


  .wt4-map .land {
    fill: #557749;
    stroke: #a5bc78;
    stroke-width: 2;
    filter: drop-shadow(0 7px 0 #0d211d);
  }


  .wt4-map .sea-line {
    fill: none;
    stroke: #6fb5b4;
    stroke-opacity: .14;
    stroke-width: 1;
  }


  .wt4-map .map-title {
    fill: #d9e9d2;
    font-size: 0.8333em;
    font-family: system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
  }


  .wt4-pin {
    cursor: pointer;
    outline: none;
  }


  .wt4-pin circle {
    fill: #e0bd65;
    stroke: #fff2b4;
    stroke-width: 2;
    filter: drop-shadow(0 3px 2px #0008);
  }


  .wt4-pin.locked circle {
    fill: #51666a;
    stroke: #a1b4b5;
  }


  .wt4-pin.passed circle {
    fill: #8fd086;
    stroke: #d5ffb9;
  }


  .wt4-pin text {
    fill: #101e13;
    font: 800 0.6667em system-ui, sans-serif;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
  }


  .wt4-pin.locked text {
    fill: white;
  }


  .wt4-pin:focus circle, .wt4-pin:hover circle {
    stroke: white;
    stroke-width: 4;
  }


  .wt4-tabs {
    display: flex;
    gap: 10px;
    margin: 16px 0;
    flex-wrap: wrap;
  }


  .wt4-location {
    border-left: 5px solid var(--gold);
    margin-top: 20px;
  }


  .wt4-small {
    color: var(--muted);
    font-size: 0.7778em;
  }


  .wt4-turn {
    padding: 20px;
    margin-bottom: 22px;
    border: 2px solid #edcf7e;
    border-radius: 16px;
    background: linear-gradient(135deg, #575632, #243927);
    box-shadow: 0 0 24px #e9c96e1c;
  }


  .wt4-turn strong {
    display: block;
    color: #ffe7a6;
    font-size: 1.6667em;
  }


  .wt4-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 16px 0;
  }


  .wt4-member {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #102017;
  }


  .wt4-member strong {
    display: block;
    color: var(--gold);
  }


  .wt4-member.current {
    border-color: #ffe29c;
    background: #38482c;
  }


  .wt4-textarea {
    width: 100%;
    min-height: 150px;
    padding: 14px;
    color: var(--text);
    background: #101c15;
    border: 1px solid #71826b;
    border-radius: 12px;
    font: inherit;
    resize: vertical;
  }


  .wt4-gear-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }


  .wt4-gear-item {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    background: linear-gradient(145deg, #344631, #17261d);
    box-shadow: 0 4px 0 #0a160e;
    text-align: left;
  }


  .wt4-gear-item.selected {
    border: 2px solid var(--gold);
    background: linear-gradient(145deg, #5e5936, #283d25);
  }


  .wt4-gear-item:disabled {
    cursor: not-allowed;
    opacity: .5;
  }


  .wt4-gear-item strong, .wt4-gear-item small {
    display: block;
  }


  .wt4-look-preview {
    padding: 24px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    margin-bottom: 22px;
    background: #15251a;
  }


  .wt4-look-preview .avatar {
    margin: 12px auto;
  }


   
  .wt[data-wt4-beret] .avatar, .wt[data-wt4-beret] .hud-avatar-v2 {
    position: relative;
    overflow: visible;
  }


  .wt[data-wt4-beret] .avatar::before, .wt[data-wt4-beret] .hud-avatar-v2::before {
    content: "";
    position: absolute;
    left: 18%;
    top: -5px;
    width: 65%;
    height: 17%;
    min-height: 9px;
    border-radius: 70% 80% 20% 20%;
    background: #647545;
    border-bottom: 3px solid #172318;
    box-shadow: 0 2px 3px #0005;
    transform: rotate(-12deg);
    pointer-events: none;
  }


  .wt[data-wt4-beret="beret-maroon"] .avatar::before, .wt[data-wt4-beret="beret-maroon"] .hud-avatar-v2::before {
    background: #823d49;
  }


  .wt[data-wt4-beret="beret-elite"] .avatar::before, .wt[data-wt4-beret="beret-elite"] .hud-avatar-v2::before {
    background: #222831;
    border-top: 1px solid #88909a;
  }


  .wt[data-wt4-frame="frame-gold"] .avatar, .wt[data-wt4-frame="frame-gold"] .hud-avatar-v2 {
    border-color: #ffe499;
    box-shadow: 0 0 0 3px #a78742, 0 8px 18px #0005;
  }


  .wt[data-wt4-frame="frame-elite"] .avatar, .wt[data-wt4-frame="frame-elite"] .hud-avatar-v2 {
    border-color: #d2f6ff;
    box-shadow: 0 0 0 3px #649dad, 0 0 22px #7fdbed55;
  }


  .wt[data-wt4-camp="camp-night"] {
    background:
      radial-gradient(ellipse at top, #25354b, transparent 65%),
      #0b121e;
  }


  .wt[data-wt4-camp="camp-night"] .hero {
    background: linear-gradient(135deg, #344857, #121d2a);
  }


  .wt[data-wt4-camp="camp-sand"] {
    background:
      radial-gradient(ellipse at top, #5d5737, transparent 65%),
      #24251b;
  }


  .wt[data-wt4-camp="camp-sand"] .hero {
    background: linear-gradient(135deg, #6a6344, #303524);
  }


  .wt #wt4Tag {
    display: block;
    font-size: 0.5556em;
    color: #d9e9bd;
    letter-spacing: 1px;
  }


   
  .wt #wt4Promotion {
    width: min(560px, calc(100% - 24px));
    text-align: center;
    overflow: hidden;
    border: 2px solid #e7c878;
    background:
      radial-gradient(ellipse at top, #67603b66, transparent 65%),
      linear-gradient(145deg, #293c2d, #101c15);
  }


  .wt #wt4Promotion::backdrop {
    background: #020805df;
    backdrop-filter: blur(5px);
  }


  .wt4-rank-badge {
    width: 140px;
    height: 160px;
    margin: 20px auto;

    display: grid;
    place-content: center;
    gap: 5px;

    clip-path: polygon(0 0, 100% 0, 100% 67%, 50% 100%, 0 67%);

    background: linear-gradient(135deg, #fff0b3, #cfa950, #f5d88b);
    color: #293820;
    filter: drop-shadow(0 9px 8px #0008);
  }


  .wt4-rank-badge span {
    font-size: 2.5556em;
    line-height: 1;
  }


  .wt4-rank-badge small {
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 0.6111em;
  }


  .wt4-confetti {
    position: absolute;
    top: -20px;
    width: 6px;
    height: 13px;
    background: #f1cf78;
    pointer-events: none;
    animation: wt4Fall 3s ease-in forwards;
  }


  @keyframes wt4Fall {
    to {
      transform: translateY(650px) rotate(440deg);
      opacity: 0;
    }
  }


  @media (prefers-reduced-motion: reduce) {
    .wt4-confetti { display: none; }

  }



  .wt5-panel {
    overflow: hidden;
    padding: 0;
  }


  .wt5-heading {
    padding: 24px 28px 0;
  }


  .wt5-layout {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(280px, 1.1fr);
    align-items: stretch;
  }


  .wt5-stage {
    position: relative;
    min-height: 460px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    padding: 20px;

    background:
      radial-gradient(
        ellipse at 50% 25%,
        rgba(231, 214, 132, .16),
        transparent 55%
      ),
      repeating-linear-gradient(
        0deg,
        transparent 0 39px,
        rgba(198, 218, 153, .035) 40px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0 39px,
        rgba(198, 218, 153, .035) 40px
      ),
      linear-gradient(180deg, #243627, #101d15);
  }


  .wt5-stage::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    top: 55px;

    border: 1px solid #b3c77b30;
    border-radius: 50%;

    box-shadow:
      0 0 0 23px #b3c77b09,
      0 0 0 46px #b3c77b06;

    pointer-events: none;
  }


  .wt5-stage::after {
    content: "";
    position: absolute;
    bottom: 48px;

    width: 240px;
    height: 55px;

    border: 1px solid #b6c58c45;
    border-radius: 50%;

    background:
      radial-gradient(
        ellipse,
        #6b78513d,
        #142116 70%
      );

    box-shadow:
      0 8px 0 #0b150f,
      0 20px 30px #0006;

    pointer-events: none;
  }


  .wt5-character {
    position: relative;
    z-index: 2;

    width: min(100%, 310px);
    height: 390px;

    filter: drop-shadow(0 13px 9px #0006);
    transition: transform .3s ease;
  }


  .wt5-stage:hover .wt5-character {
    transform: translateY(-3px);
  }


  .wt5-character [hidden] {
    display: none !important;
  }


  .wt5-stage-label {
    position: relative;
    z-index: 3;

    margin-top: 7px;
    padding: 6px 14px;

    border: 1px solid #a58c4e;
    border-radius: 9px;

    background: #122018;
    color: #ffe2a0;

    font-size: 0.7778em;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
  }


  .wt5-info {
    padding: 26px;
    background:
      linear-gradient(
        145deg,
        rgba(255, 255, 255, .035),
        transparent 60%
      );
  }


  .wt5-name {
    margin-bottom: 5px;
    overflow-wrap: anywhere;
  }


  .wt5-rank {
    display: inline-block;
    padding: 6px 13px;
    margin: 0 0 18px;

    border: 1px solid #d4b76b;
    border-radius: 9px;

    background: linear-gradient(135deg, #655934, #37452b);
    color: #ffe4a2;
    font-weight: 800;
  }


  .wt5-equipment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 18px 0;
  }


  .wt5-equipment-item {
    padding: 10px 12px;

    border: 1px solid #4e6145;
    border-radius: 11px;

    background: #122017;
    font-size: 0.7778em;
  }


  .wt5-equipment-item strong {
    display: block;
    color: #d5e8c5;
  }


  .wt5-equipment-item small {
    display: block;
    margin-top: 3px;
    font-size: 0.6111em;
    line-height: 1.4;
    color: #aebca2;
  }


  .wt5-equipment-item.locked {
    opacity: .55;
    border-style: dashed;
  }


  .wt5-equipment-item.unlocked {
    border-color: #92ae64;
    background: linear-gradient(135deg, #2d4228, #17291d);
  }


  .wt5-next {
    padding: 16px;
    margin: 18px 0 0;

    border-left: 4px solid #f2d083;
    border-radius: 0 12px 12px 0;

    background: #d3ad5510;
  }


  .wt5-next strong {
    display: block;
    color: #ffe0a0;
  }


  .wt5-next p {
    margin: 7px 0 0;
    color: #c3d0b8;
    font-size: 0.8333em;
  }


  .wt5-caption {
    padding: 14px 24px;
    margin: 0;

    border-top: 1px solid var(--line);

    color: var(--muted);
    font-size: 0.6667em;
    text-align: center;
  }


  @media (max-width: 700px) {
    .wt5-layout {
      grid-template-columns: 1fr;
    }


    .wt5-stage {
      min-height: 390px;
    }


    .wt5-character {
      height: 330px;
      width: 265px;
    }


    .wt5-heading {
      padding: 20px 20px 0;
    }


    .wt5-info {
      padding: 22px;
    }

  }


  @media (prefers-reduced-motion: reduce) {
    .wt5-character {
      transition: none;
    }


    .wt5-stage:hover .wt5-character {
      transform: none;
    }

  }



  .wt6-gender-panel {
    border-color: #b6a063;
  }


  .wt6-gender-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }


  .wt6-gender-symbol {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;
    flex-shrink: 0;

    border: 1px solid #d1b36d;
    border-radius: 15px;

    background: linear-gradient(
      135deg,
      #556342,
      #223522
    );

    font-size: 1.6667em;

    box-shadow:
      inset 0 1px 0 #ffffff20,
      0 4px 0 #122014;
  }


  .wt6-gender-intro p {
    margin: 0;
  }


  .wt6-choice-notice {
    padding: 14px;
    margin: 15px 0;

    border: 1px solid #c9ac62;
    border-radius: 12px;

    background: #c9ac6210;
    font-size: 0.8333em;
  }


  .wt6-choice-notice .btn {
    margin-top: 10px;
  }


  .wt6-registration-help {
    margin: -6px 0 18px;
    color: var(--muted);
    font-size: 0.7778em;
  }



  .wt #wt7TrainingDialog {
    width: min(540px, calc(100vw - 28px));
    max-height: 90vh;
    overflow: auto;
    padding: 0;
    border: 2px solid #bba359;
    border-radius: 24px;
    color: #f5f1df;
    background: linear-gradient(145deg, #263b2c, #101c16);
    box-shadow: 0 24px 90px #000a;
    font-size: 1em;
  }


  .wt #wt7TrainingDialog::backdrop {
    background: #071009d9;
    backdrop-filter: blur(5px);
  }


  .wt7-content {
    padding: 24px;
    text-align: center;
  }


  .wt7-kicker {
    color: #e0c879;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 1em;
  }


  .wt #wt7TrainingTitle {
    margin: 10px 0;
    font-size: clamp(1.4444em, 6vw, 2em);
  }


  .wt #wt7TrainingPlayer {
    margin: 0 0 14px;
    color: #e0c879;
    font-weight: 700;
    overflow-wrap: anywhere;
  }


  .wt7-stage {
    position: relative;
    height: 240px;
    overflow: hidden;
    border: 1px solid #91a66d55;
    border-radius: 18px;
    background:
      radial-gradient(ellipse at 50% 100%, #72805755, transparent 70%),
      repeating-linear-gradient(
        0deg,
        transparent 0 29px,
        #a7b9830c 29px 30px
      ),
      linear-gradient(#18291f, #304333);
    perspective: 600px;
  }


  .wt7-stage::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 23px;
    height: 3px;
    background: #b8a05e;
    box-shadow: 0 8px 20px #0009;
  }


  .wt7-actor {
    position: absolute;
    left: calc(50% - 90px);
    top: 12px;
    width: 180px;
    height: 210px;
    transform-origin: 50% 55%;
    filter: drop-shadow(5px 8px 5px #0008);
  }


  .wt7-actor svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }


  .wt7-arm-left { transform-origin: 69px 78px; }

  .wt7-arm-right { transform-origin: 111px 78px; }

  .wt7-leg-left { transform-origin: 79px 132px; }

  .wt7-leg-right { transform-origin: 101px 132px; }


  .wt #wt7TrainingDialog .wt7-hijab {
    display: none;
  }


  .wt #wt7TrainingDialog[data-gender="perempuan"] .wt7-hijab {
    display: block;
  }


   
  .wt7-stage[data-move="support"] .wt7-actor {
    animation: wt7Support 1s ease-in-out infinite;
  }


  .wt7-stage[data-move="support"] .wt7-arm-left, .wt7-stage[data-move="support"] .wt7-arm-right {
    transform: rotate(-70deg);
  }


  @keyframes wt7Support {
    0%, 100% {
      transform: translateY(39px) rotate(90deg) scale(.82);
    }
    50% {
      transform: translateY(53px) rotate(90deg) scale(.82);
    }
  }


   
  .wt7-stage[data-move="roll"] .wt7-actor {
    animation: wt7Roll 1.5s ease-in-out infinite;
  }


  .wt7-stage[data-move="roll"] .wt7-arm-left {
    transform: rotate(-105deg);
  }


  .wt7-stage[data-move="roll"] .wt7-arm-right {
    transform: rotate(105deg);
  }


  .wt7-stage[data-move="roll"] .wt7-leg-left {
    transform: rotate(-95deg);
  }


  .wt7-stage[data-move="roll"] .wt7-leg-right {
    transform: rotate(95deg);
  }


  @keyframes wt7Roll {
    0% {
      transform: translate(-72px, 48px) rotate(0deg) scale(.65);
    }
    100% {
      transform: translate(72px, 48px) rotate(360deg) scale(.65);
    }
  }


   
  .wt7-stage[data-move="jump"] .wt7-actor {
    animation: wt7Jump 1.15s ease-in-out infinite;
  }


  .wt7-stage[data-move="jump"] .wt7-leg-left {
    animation: wt7SquatLeft 1.15s ease-in-out infinite;
  }


  .wt7-stage[data-move="jump"] .wt7-leg-right {
    animation: wt7SquatRight 1.15s ease-in-out infinite;
  }


  @keyframes wt7Jump {
    0%, 100% { transform: translateY(0) scale(.85); }
    25% { transform: translateY(24px) scale(.85, .72); }
    58% { transform: translateY(-25px) scale(.85); }
    80% { transform: translateY(0) scale(.85); }
  }


  @keyframes wt7SquatLeft {
    0%, 58%, 100% { transform: rotate(0); }
    25% { transform: rotate(28deg); }
  }


  @keyframes wt7SquatRight {
    0%, 58%, 100% { transform: rotate(0); }
    25% { transform: rotate(-28deg); }
  }


   
  .wt7-stage[data-move="crawl"] .wt7-actor {
    animation: wt7Crawl 1.5s ease-in-out infinite alternate;
  }


  .wt7-stage[data-move="crawl"] .wt7-arm-left, .wt7-stage[data-move="crawl"] .wt7-leg-right {
    animation: wt7CrawlLimbA .65s ease-in-out infinite alternate;
  }


  .wt7-stage[data-move="crawl"] .wt7-arm-right, .wt7-stage[data-move="crawl"] .wt7-leg-left {
    animation: wt7CrawlLimbB .65s ease-in-out infinite alternate;
  }


  @keyframes wt7Crawl {
    from {
      transform: translate(-48px, 60px) rotate(90deg) scale(.75);
    }
    to {
      transform: translate(48px, 60px) rotate(90deg) scale(.75);
    }
  }


  @keyframes wt7CrawlLimbA {
    from { transform: rotate(-35deg); }
    to   { transform: rotate(35deg); }
  }


  @keyframes wt7CrawlLimbB {
    from { transform: rotate(35deg); }
    to   { transform: rotate(-35deg); }
  }


  .wt7-description {
    line-height: 1.6;
    margin: 16px 0;
  }


  .wt7-meter {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #ffffff18;
    margin-bottom: 18px;
  }


  .wt7-meter-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #9aad63, #e5c46c);
    transform-origin: left;
  }


  .wt #wt7TrainingDialog[open] .wt7-meter-fill {
    animation: wt7Countdown 30s linear forwards;
  }


  @keyframes wt7Countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
  }


  .wt #wt7Skip {
    min-height: 48px;
    width: 100%;
    cursor: pointer;
    border: 1px solid #d3bb73;
    border-radius: 12px;
    background: #dfc679;
    color: #182519;
    font: inherit;
    font-weight: 800;
    padding: 12px 18px;
  }


  .wt #wt7Skip:focus-visible {
    outline: 3px solid white;
    outline-offset: 4px;
  }


  @media (prefers-reduced-motion: reduce) {
    .wt #wt7TrainingDialog .wt7-actor, .wt #wt7TrainingDialog .wt7-actor g, .wt #wt7TrainingDialog .wt7-meter-fill {
      animation: none !important;
    }

  }



.wt8-wrap {font-size:1em;line-height:1.65;color:var(--text,#f5f0df)}

.wt8-banner {padding:24px;border:1px solid #a99350;border-radius:20px;background:linear-gradient(135deg,#314b35,#14251b);box-shadow:0 12px 25px #0004}

.wt8-banner h1 {color:#efcf79;margin:0 0 8px;font-size:clamp(1.4444em,6vw,2.1111em)}

.wt8-muted {color:#becbb7;font-size:1em}
.wt8-wrap p {white-space:pre-wrap;overflow-wrap:anywhere}

.wt8-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;margin-top:20px}

.wt8-card {padding:22px;border:1px solid #81916866;border-radius:18px;background:#1e3228;box-shadow:0 6px 15px #0003}

.wt8-card h2, .wt8-card h3 {margin-top:0;color:#efcf79}
.wt8-card h3 {font-size:1.2222em}

.wt8-toolbar {display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.wt8-btn {font:inherit;font-weight:700;min-height:48px;padding:12px 18px;border-radius:12px;border:1px solid #b7a46b;background:#dec37a;color:#17241b;cursor:pointer}

.wt8-btn.secondary {color:#f4edd7;background:#304b38}
.wt8-btn:disabled {opacity:.5;cursor:not-allowed}

.wt8-btn:focus-visible, .wt8-wrap textarea:focus-visible, .wt8-wrap select:focus-visible {outline:3px solid #ffe8a2;outline-offset:3px}

.wt8-wrap label {display:block;margin:16px 0}
.wt8-wrap label>span {display:block;font-weight:700;margin-bottom:6px}

.wt8-wrap textarea, .wt8-wrap select {font:inherit;line-height:1.6;color:#f5f0df;background:#102319;border:1px solid #80956f;border-radius:12px;padding:12px;box-sizing:border-box;width:100%}

.wt8-wrap textarea {min-height:120px;resize:vertical}
.wt8-wrap .wt8-long {min-height:240px}

.wt8-pill {display:inline-block;background:#435c36;border-radius:20px;padding:4px 12px;margin:4px 0;color:#ffe2a0}

.wt8-status {padding:12px;border-left:4px solid #d8be6e;margin:12px 0;background:#0002}

.wt8-wrap .wt8-check {display:flex;gap:12px;align-items:flex-start}
.wt8-check input {margin-top:8px;width:22px;height:22px;flex-shrink:0}

.wt8-reference {border-left:4px solid #a9c285;padding-left:16px}
.wt8-reference p {margin:8px 0 18px}

.wt8-wrap details {margin-top:14px}
.wt8-wrap summary {cursor:pointer;font-weight:700}

.wt8-nav {border-color:#d9bc60!important}

@media(prefers-reduced-motion:no-preference) {.wt8-card {animation:wt8Enter .2s ease-out}
@keyframes wt8Enter {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}