.encounter-card {
      position: absolute;
      z-index: 30;
      inset: 10px;
      padding: 13px 14px 12px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 8px;
      border: 1px solid rgba(120, 241, 231, 0.28);
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% 23%, rgba(93, 246, 230, 0.18), transparent 31%),
        radial-gradient(circle at 16% 80%, rgba(74, 125, 255, 0.18), transparent 31%),
        rgba(4, 19, 31, 0.985);
      box-shadow: inset 0 0 50px rgba(93, 246, 230, 0.04);
      opacity: 0;
      transform: scale(0.97);
      pointer-events: none;
      transition: opacity 280ms ease, transform 280ms ease;
    }
    .encounter-card[hidden] { display: none; }
    .encounter-card.visible {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }
    .encounter-heading {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      text-align: left;
    }
    .encounter-object {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.28);
      border-radius: 17px 17px 21px 21px;
      color: #06202d;
      background: linear-gradient(145deg, #fbfff0, #5df6e6 65%, #3888ff);
      font-size: 22px;
      font-weight: 900;
      box-shadow: 0 0 0 6px rgba(93, 246, 230, 0.07), 0 0 28px rgba(93, 246, 230, 0.32);
      animation: encounter-float 2.4s ease-in-out infinite;
    }
    .encounter-object.theme-crystal {
      border-radius: 20px 38px 20px 38px;
      color: #160b2a;
      background: linear-gradient(145deg, #fff, #bf8cff 52%, #5df6e6);
      box-shadow: 0 0 0 9px rgba(191, 140, 255, 0.08), 0 0 42px rgba(191, 140, 255, 0.42);
    }
    .encounter-object.theme-shield {
      border-radius: 28px 28px 38px 38px;
      color: #332300;
      background: linear-gradient(145deg, #fff6c6, #ffc857 58%, #ff7b55);
      box-shadow: 0 0 0 9px rgba(255, 200, 87, 0.08), 0 0 42px rgba(255, 200, 87, 0.4);
    }
    .encounter-kicker {
      margin: 0 0 2px;
      color: var(--cyan);
      font-size: 8px;
      font-weight: 850;
      letter-spacing: 0.18em;
    }
    .encounter-card h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.035em;
    }
    .encounter-heading p:not(.encounter-kicker) {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.3;
    }
    .encounter-card.zodiac-active {
      justify-content: flex-start;
      gap: 6px;
      padding-block: 9px;
    }
    .encounter-card.zodiac-active .encounter-heading {
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 8px;
    }
    .encounter-card.zodiac-active .encounter-object {
      width: 36px;
      height: 36px;
      border-radius: 14px 22px 14px 22px;
      font-size: 18px;
    }
    .encounter-card.zodiac-active .encounter-kicker {
      font-size: 7px;
    }
    .encounter-card.zodiac-active h2 {
      font-size: 15px;
    }
    .encounter-card.zodiac-active .encounter-heading p:not(.encounter-kicker) {
      font-size: 8px;
    }
    .encounter-card.zodiac-active .encounter-board {
      height: auto;
      min-height: 0;
      flex: 1 1 auto;
    }
    .daily-mission-toast {
      position: absolute;
      z-index: 26;
      top: 48px;
      left: 50%;
      min-width: 210px;
      max-width: calc(100% - 34px);
      padding: 9px 14px;
      border: 1px solid rgba(255, 213, 109, 0.4);
      border-radius: 999px;
      color: #fff5d1;
      background: rgba(7, 27, 40, 0.94);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), 0 0 24px rgba(255, 200, 87, 0.14);
      font-size: 10px;
      font-weight: 800;
      text-align: center;
      opacity: 0;
      transform: translate(-50%, -8px) scale(0.96);
      pointer-events: none;
    }
    .daily-mission-toast.visible {
      animation: daily-mission-toast var(--mission-toast-duration, 1900ms) ease forwards;
    }
    .daily-mission-toast.mission-intro {
      top: 50%;
      min-width: min(330px, calc(100% - 34px));
      padding: 16px 18px;
      border-radius: 20px;
      font-size: 13px;
      line-height: 1.5;
      white-space: pre-line;
      background:
        radial-gradient(circle at 50% 0%, rgba(255, 200, 87, 0.2), transparent 60%),
        rgba(7, 27, 40, 0.98);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.52), 0 0 36px rgba(255, 200, 87, 0.2);
    }
    .daily-mission-panel {
      margin: 22px 0 0;
      padding: 18px 19px 16px;
      border: 1px solid rgba(255, 200, 87, 0.16);
      border-radius: 22px;
      background:
        radial-gradient(circle at 92% 8%, rgba(255, 200, 87, 0.08), transparent 34%),
        rgba(4, 19, 31, 0.64);
    }
    .daily-mission-heading {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 14px;
    }
    .daily-mission-kicker {
      margin: 0 0 4px;
      color: #ffd56d;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: 0.15em;
    }
    .daily-mission-heading h2 {
      margin: 0;
      font-size: 21px;
      letter-spacing: -0.04em;
    }
    .daily-mission-summary {
      min-width: 82px;
      padding: 7px 9px;
      display: grid;
      gap: 2px;
      text-align: center;
      border: 1px solid rgba(255, 200, 87, 0.22);
      border-radius: 13px;
      background: rgba(255, 200, 87, 0.055);
    }
    .daily-mission-summary strong {
      color: #ffd56d;
      font-size: 16px;
      line-height: 1;
    }
    .daily-mission-summary span {
      color: #a99469;
      font-size: 7px;
      font-weight: 750;
      text-transform: uppercase;
    }
    .daily-mission-summary.is-complete {
      border-color: rgba(93, 246, 230, 0.32);
      background: rgba(93, 246, 230, 0.07);
    }
    .daily-mission-summary.is-complete strong,
    .daily-mission-summary.is-complete span { color: var(--cyan); }
    .daily-mission-list {
      margin-top: 14px;
      display: grid;
      gap: 7px;
    }
    .daily-mission-card {
      min-height: 58px;
      padding: 8px 9px;
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.022);
      transition: border-color 180ms ease, background 180ms ease;
    }
    .daily-mission-card.is-complete {
      border-color: rgba(93, 246, 230, 0.22);
      background: rgba(93, 246, 230, 0.045);
    }
    .daily-mission-card.is-active {
      border-color: rgba(255, 200, 87, 0.58);
      box-shadow: inset 0 0 22px rgba(255, 200, 87, 0.08), 0 0 18px rgba(255, 200, 87, 0.08);
    }
    .daily-mission-symbol {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 213, 109, 0.2);
      border-radius: 11px;
      color: #ffd56d;
      background: rgba(255, 200, 87, 0.06);
      font-size: 16px;
      font-weight: 900;
    }
    .daily-mission-card.is-complete .daily-mission-symbol {
      color: var(--night);
      background: var(--cyan);
      box-shadow: 0 0 18px rgba(93, 246, 230, 0.22);
    }
    .daily-mission-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }
    .daily-mission-copy strong { font-size: 11px; }
    .daily-mission-copy small {
      overflow: hidden;
      color: var(--muted);
      font-size: 8px;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .daily-mission-track {
      height: 4px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.07);
    }
    .daily-mission-track i {
      display: block;
      width: var(--daily-progress);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ffc857, var(--cyan));
      transition: width 240ms ease;
    }
    .daily-mission-reward {
      display: grid;
      gap: 2px;
      color: #ffd56d;
      text-align: right;
      font-size: 9px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }
    .daily-mission-reward small {
      color: var(--muted);
      font-size: 7px;
      font-weight: 700;
    }
    .daily-mission-card.is-complete .daily-mission-reward { color: var(--cyan); }
    .collection-panel {
      margin: 22px 0 2px;
      padding: 19px;
      border: 1px solid rgba(93, 246, 230, 0.12);
      border-radius: 22px;
      background: rgba(4, 19, 31, 0.64);
    }
    .collection-panel.has-zodiac-frame { border-color: rgba(255,200,87,.48); box-shadow: inset 0 0 30px rgba(255,200,87,.05), 0 0 24px rgba(191,140,255,.1); }
    .collection-heading {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 15px;
    }
    .collection-kicker {
      margin: 0 0 4px;
      color: var(--cyan);
      font-size: 9px;
      font-weight: 850;
      letter-spacing: 0.15em;
    }
    .collection-heading h2 {
      margin: 0;
      font-size: 21px;
      letter-spacing: -0.04em;
    }
    .streak-badge {
      min-width: 78px;
      padding: 8px 10px;
      display: grid;
      gap: 2px;
      text-align: center;
      border: 1px solid rgba(255, 200, 87, 0.24);
      border-radius: 13px;
      background: rgba(255, 200, 87, 0.06);
    }
    .streak-badge strong {
      color: #ffd56d;
      font-size: 19px;
      line-height: 1;
    }
    .streak-badge span {
      color: #a99469;
      font-size: 8px;
      text-transform: uppercase;
    }
    .weekly-progress {
      margin: 17px 0 14px;
    }
    .weekly-progress > div:first-child {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 10px;
    }
    .weekly-progress b { color: var(--paper); }
    .weekly-track {
      height: 6px;
      margin-top: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
    }
    .weekly-track i {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #ffc857, var(--cyan));
      transition: width 300ms ease;
    }
    .guardian-collection {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .guardian-card {
      min-height: 112px;
      padding: 10px 7px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-align: center;
      border: 1px solid rgba(93, 246, 230, 0.1);
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.025);
    }
    .guardian-card.is-locked {
      filter: saturate(0.25);
      opacity: 0.62;
    }
    .guardian-card.is-unlocked {
      border-color: rgba(93, 246, 230, 0.28);
      box-shadow: 0 0 22px rgba(93, 246, 230, 0.08);
    }
    .guardian-symbol {
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--ink);
      background: linear-gradient(145deg, #fbfff0, var(--cyan));
      font-size: 18px;
      font-weight: 900;
    }
    .guardian-card.theme-crystal .guardian-symbol {
      background: linear-gradient(145deg, #fff, #bf8cff);
    }
    .guardian-card.theme-shield .guardian-symbol {
      background: linear-gradient(145deg, #fff6c6, #ffc857);
    }
    .guardian-card strong {
      font-size: 11px;
      line-height: 1.1;
    }
    .guardian-card small {
      min-height: 20px;
      color: var(--muted);
      font-size: 8px;
      line-height: 1.25;
    }
    .zodiac-album-heading { margin: 16px 1px 8px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
    .zodiac-album-heading > div { display: flex; align-items: center; gap: 7px; }
    .zodiac-album-heading strong { font-size: 11px; }
    .zodiac-album-heading span { padding: 2px 6px; border-radius: 999px; color: var(--night); background: #ffc857; font-size: 8px; font-weight: 900; }
    .zodiac-album-heading small { color: var(--muted); font-size: 7px; }
    .zodiac-album { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
    .zodiac-card { min-height: 54px; padding: 5px 2px; display: grid; place-items: center; gap: 1px; border: 1px solid rgba(191,140,255,.12); border-radius: 11px; color: #69808c; background: rgba(191,140,255,.025); text-align: center; }
    .zodiac-card.is-found { color: #e9dcff; border-color: rgba(191,140,255,.32); background: rgba(191,140,255,.07); box-shadow: inset 0 0 15px rgba(191,140,255,.05); }
    .zodiac-card.is-perfect { border-color: rgba(255,200,87,.42); }
    .zodiac-card b { font-size: 18px; line-height: 1; }
    .zodiac-card span { max-width: 100%; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
    .zodiac-card small { min-height: 8px; color: #ffc857; font-size: 7px; letter-spacing: -.08em; }
    .encounter-board.geometry-mode { container-type: size; --geometry-unit: min(1cqw, calc((100cqh - 60px) / 100)); }
    .geometry-mode .encounter-lines { height: calc(100% - 60px); bottom: auto; }
    .geometry-mode .encounter-target {
      left: calc(50% + (var(--geometry-x) - 50) * var(--geometry-unit));
      top: calc((100% - 60px) / 2 + (var(--geometry-y) - 50) * var(--geometry-unit));
    }
    .geometry-mode .encounter-target:not(.is-current) { pointer-events: none; }
    .geometry-mode .encounter-target.hit { visibility: hidden; }
    .geometry-solid { position: absolute; width: 100%; height: calc(100% - 60px); inset: 0; animation: geometry-reveal 450ms ease-out both; }
    .geometry-solid polygon { stroke: rgba(255,255,255,.2); stroke-width: .25; stroke-linejoin: round; }
    .geometry-continue { position: absolute; z-index: 5; bottom: 8px; left: 50%; transform: translateX(-50%); min-height: 44px; padding: 10px 18px; border: 1px solid #a8fff2; border-radius: 14px; background: #153d49; color: white; font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; }
    .geometry-continue:focus-visible { outline: 3px solid #ffd36e; outline-offset: 2px; }
    @keyframes geometry-reveal { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .geometry-solid { animation: none; } }
    .encounter-board {
      position: relative;
      width: 100%;
      height: auto;
      min-height: 0;
      flex: 1 1 auto;
      overflow: hidden;
      border: 1px solid rgba(93, 246, 230, 0.1);
      border-radius: 20px;
      background:
        linear-gradient(rgba(93, 246, 230, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 246, 230, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(93, 246, 230, 0.09), transparent 52%),
        rgba(255, 255, 255, 0.015);
      background-size: 22px 22px, 22px 22px, auto, auto;
      cursor: crosshair;
      touch-action: none;
      user-select: none;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }
    .encounter-board.is-drawing {
      border-color: rgba(93, 246, 230, 0.34);
      box-shadow: inset 0 0 28px rgba(93, 246, 230, 0.07);
    }
    .encounter-board.is-mistake {
      border-color: rgba(255, 111, 117, 0.55);
      box-shadow: inset 0 0 28px rgba(255, 111, 117, 0.1);
      animation: encounter-mistake 260ms ease;
    }
    .encounter-board.guardian-awakening {
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 213, 109, 0.34), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(93, 246, 230, 0.14), transparent 68%);
      box-shadow: inset 0 0 30px rgba(255, 213, 109, 0.08);
    }
    .encounter-board.defense-mode {
      cursor: default;
      background:
        radial-gradient(circle at 50% 52%, rgba(93, 246, 230, 0.15), transparent 26%),
        radial-gradient(circle at 50% 50%, rgba(74, 125, 255, 0.1), transparent 62%),
        rgba(3, 15, 27, 0.96);
    }
    .defense-core {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 52%;
      width: 66px;
      height: 66px;
      display: grid;
      place-items: center;
      border: 2px solid rgba(93, 246, 230, 0.68);
      border-radius: 50%;
      background: rgba(93, 246, 230, 0.06);
      box-shadow: 0 0 0 9px rgba(93, 246, 230, 0.05), 0 0 34px rgba(93, 246, 230, 0.24);
      transform: translate(-50%, -50%);
      pointer-events: none;
      animation: defense-core-pulse 1.6s ease-in-out infinite;
    }
    .defense-core::before {
      content: "";
      width: 27px;
      height: 36px;
      border-radius: 48% 48% 38% 38%;
      background: linear-gradient(160deg, #fff, #bffcf4);
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.56);
    }
    .encounter-board.defense-damage .defense-core {
      border-color: var(--coral);
      box-shadow: 0 0 0 12px rgba(255, 111, 117, 0.08), 0 0 38px rgba(255, 111, 117, 0.42);
      animation: encounter-mistake 260ms ease;
    }
    .defense-enemy {
      position: absolute;
      z-index: 4;
      left: var(--enemy-x);
      top: var(--enemy-y);
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 48% 52% 44% 56%;
      color: #260b14;
      background: linear-gradient(145deg, #ffcf6a, #ff6f75 68%, #9f315e);
      box-shadow: 0 0 0 5px rgba(255, 111, 117, 0.08), 0 0 20px rgba(255, 111, 117, 0.38);
      font-size: 17px;
      font-weight: 950;
      transform: translate(-50%, -50%) rotate(var(--enemy-rotation)) scale(var(--enemy-scale));
      touch-action: manipulation;
      user-select: none;
    }
    .defense-enemy.sugar {
      color: #1d1135;
      background: linear-gradient(145deg, #f3dcff, #bf8cff 58%, #6b4dff);
      box-shadow: 0 0 0 5px rgba(191, 140, 255, 0.08), 0 0 20px rgba(191, 140, 255, 0.4);
    }
    .defense-enemy:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 2px;
    }
    .defense-countdown {
      position: absolute;
      z-index: 8;
      inset: 0;
      display: grid;
      place-items: center;
      color: #fff5d1;
      background: rgba(3, 15, 27, 0.74);
      font-size: 42px;
      font-weight: 950;
      text-shadow: 0 0 24px rgba(255, 200, 87, 0.75);
      pointer-events: none;
    }
    .defense-result {
      position: absolute;
      z-index: 7;
      inset: 0;
      display: grid;
      place-content: center;
      gap: 4px;
      padding: 18px;
      text-align: center;
      background: radial-gradient(circle, rgba(93, 246, 230, 0.18), rgba(3, 15, 27, 0.96) 68%);
    }
    .defense-result strong { color: var(--cyan); font-size: 22px; }
    .defense-result span { color: var(--muted); font-size: 10px; }
    .crystal-completion { width: min(360px, calc(100vw - 36px)); max-height: calc(100dvh - 40px); overflow: auto; box-sizing: border-box; padding: 26px 22px; border: 1px solid #65dfdb; border-radius: 26px; background: radial-gradient(circle at top, #205468, #0b2536 70%); color: #e9ffff; text-align: center; box-shadow: 0 20px 80px #00101899; }
    .crystal-completion::backdrop { background: #00131bcc; backdrop-filter: blur(5px); }
    .crystal-celebration-icon { font-size: 68px; line-height: 1.2; color: #6df7e8; filter: drop-shadow(0 0 16px #51eadb); }
    .is-success .crystal-celebration-icon { animation: crystal-joy 700ms ease-out; }
    .crystal-completion-kicker { color: #8fe5df; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
    .crystal-completion h2 { font-size: 25px; line-height: 1.15; margin: 12px 0; }
    .crystal-completion p { line-height: 1.5; }
    .crystal-completion-rewards { display: flex; justify-content: center; gap: 12px; margin: 22px 0 12px; }
    .crystal-completion-rewards span { flex: 1; padding: 12px 8px; border-radius: 14px; background: #ffffff0c; }
    .crystal-completion-rewards b { display: block; color: #ffd979; font-size: 27px; }
    .crystal-completion-stats { color: #9bbac7; font-size: 13px; }
    .crystal-completion button { width: 100%; min-height: 46px; padding: 12px; border: 0; border-radius: 14px; background: #62efdf; color: #092936; font: inherit; font-weight: 900; cursor: pointer; }
    .crystal-completion button:focus-visible { outline: 3px solid #ffd979; outline-offset: 4px; }
    @keyframes crystal-joy { 0% { transform: scale(.4) rotate(-25deg); opacity: 0; } 70% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1); opacity: 1; } }
    @media (prefers-reduced-motion: reduce) { .is-success .crystal-celebration-icon { animation: none; } }
    .crystal-grid {
      position: absolute;
      inset: 8px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 5px;
    }
    .crystal-piece {
      position: relative;
      container-type: size;
      min-width: 0;
      border: 1px solid rgba(191, 140, 255, 0.2);
      border-radius: 12px;
      color: #d9c4ff;
      background: rgba(191, 140, 255, 0.055);
      touch-action: manipulation;
      transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }
    .crystal-piece.powered {
      border-color: rgba(93, 246, 230, 0.7);
      background: rgba(93, 246, 230, 0.12);
      box-shadow: inset 0 0 16px rgba(93, 246, 230, 0.12), 0 0 14px rgba(93, 246, 230, 0.2);
    }
    .crystal-piece:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
    .crystal-path {
      position: absolute;
      width: min(100cqw, 100cqh);
      height: min(100cqw, 100cqh);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(calc(var(--crystal-rotation) * 90deg));
      transition: transform 180ms ease;
      pointer-events: none;
    }
    .crystal-piece.straight .crystal-path::before,
    .crystal-piece.source .crystal-path::before,
    .crystal-piece.target .crystal-path::before {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      top: calc(50% - 2px);
      height: 4px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
    }
    .crystal-piece.corner .crystal-path::before,
    .crystal-piece.corner .crystal-path::after {
      content: "";
      position: absolute;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
    }
    .crystal-piece.corner .crystal-path::before {
      left: 50%;
      top: 8%;
      width: 4px;
      height: 44%;
      border-radius: 999px 999px 0 0;
    }
    .crystal-piece.corner .crystal-path::after {
      left: 50%;
      top: calc(50% - 2px);
      width: 42%;
      height: 4px;
      border-radius: 0 999px 999px 0;
    }
    .crystal-marker {
      position: absolute;
      z-index: 2;
      inset: 0;
      display: grid;
      place-items: center;
      font-size: 18px;
      font-weight: 950;
      pointer-events: none;
    }
    .crystal-piece.source .crystal-marker { color: #ffc857; }
    .crystal-source-arrow { position: absolute; right: 3px; top: 0; color: #ffe49b; font-size: 18px; line-height: 1; pointer-events: none; }
    .crystal-piece.target .crystal-marker { color: var(--cyan); }
    .boss-arena {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .boss-health-track {
      position: absolute;
      z-index: 7;
      top: 8px;
      left: 12px;
      right: 12px;
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.1);
    }
    .boss-health-track i {
      display: block;
      width: var(--boss-health);
      height: 100%;
      background: linear-gradient(90deg, #ff6f75, #ffc857);
      transition: width 180ms ease;
    }
    .plaque-boss {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 54%;
      width: 88px;
      height: 76px;
      display: grid;
      place-items: center;
      border: 2px solid rgba(255, 200, 87, 0.3);
      border-radius: 42% 58% 48% 52%;
      color: #371023;
      background: radial-gradient(circle at 38% 30%, #ffdb75, #ff6f75 55%, #8c285d);
      box-shadow: 0 0 0 12px rgba(255, 111, 117, 0.06), 0 0 42px rgba(255, 111, 117, 0.36);
      font-size: 34px;
      transform: translate(-50%, -50%);
      animation: boss-hover 1.8s ease-in-out infinite;
      pointer-events: none;
    }
    .boss-arena.phase-two .plaque-boss {
      background: radial-gradient(circle at 38% 30%, #fff0a0, #d64f72 52%, #48133f);
      box-shadow: 0 0 0 15px rgba(191, 140, 255, 0.08), 0 0 48px rgba(191, 140, 255, 0.42);
    }
    .boss-weak-point,
    .boss-hazard {
      position: absolute;
      z-index: 6;
      left: var(--target-x);
      top: var(--target-y);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      touch-action: manipulation;
    }
    .boss-weak-point {
      border: 2px solid #fff;
      color: #281b00;
      background: #ffc857;
      box-shadow: 0 0 0 7px rgba(255, 200, 87, 0.12), 0 0 24px #ffc857;
      animation: encounter-pulse 760ms ease-in-out infinite;
    }
    .boss-hazard {
      border: 2px solid rgba(255, 255, 255, 0.5);
      color: #fff;
      background: #c83d61;
      box-shadow: 0 0 18px rgba(255, 66, 98, 0.7);
    }
    .boss-special {
      position: absolute;
      z-index: 8;
      right: 10px;
      bottom: 8px;
      padding: 7px 10px;
      border: 1px solid rgba(93, 246, 230, 0.65);
      border-radius: 999px;
      color: var(--night);
      background: var(--cyan);
      font-size: 9px;
      font-weight: 900;
      opacity: 0.42;
    }
    .boss-special.ready {
      opacity: 1;
      box-shadow: 0 0 22px rgba(93, 246, 230, 0.55);
      animation: encounter-pulse 900ms ease-in-out infinite;
    }
    .boss-attack-warning {
      position: absolute;
      z-index: 5;
      inset: 0;
      display: grid;
      place-items: end center;
      padding-bottom: 9px;
      color: #fff;
      background: rgba(255, 66, 98, 0.14);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.08em;
      opacity: 0;
      pointer-events: none;
    }
    .boss-arena.attack-warning .boss-attack-warning { opacity: 1; }
    .boss-arena.dodged { transform: translateX(5px); }
    .encounter-lines {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }
    .encounter-trace,
    .encounter-live-line {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .encounter-trace {
      stroke: var(--cyan);
      stroke-width: 5;
      filter: drop-shadow(0 0 5px rgba(93, 246, 230, 0.9));
    }
    .encounter-live-line {
      stroke: rgba(255, 255, 255, 0.68);
      stroke-width: 3;
      stroke-dasharray: 6 7;
    }
    .encounter-board.is-mistake .encounter-live-line {
      stroke: var(--coral);
    }
    .encounter-target {
      position: absolute;
      left: var(--target-x);
      top: var(--target-y);
      z-index: 2;
      width: 48px;
      height: 48px;
      border: 0;
      border-radius: 50%;
      color: var(--night);
      background: transparent;
      font-size: 9px;
      font-weight: 900;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.45);
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease;
    }
    .encounter-target::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0 5px rgba(93, 246, 230, 0.12), 0 0 18px var(--cyan);
      animation: encounter-pulse 1.2s ease-in-out infinite;
    }
    .encounter-target.is-current {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    .encounter-target.is-current::after {
      content: attr(data-step);
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
    }
    .encounter-target:focus-visible::before {
      background: #fff;
      box-shadow: 0 0 0 7px rgba(93, 246, 230, 0.16), 0 0 24px #fff;
    }
    .encounter-target:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }
    .encounter-target.hit {
      opacity: 1;
      transform: translate(-50%, -50%) scale(0.58);
    }
    .encounter-target.hit::before {
      background: #fff;
      box-shadow: 0 0 12px rgba(93, 246, 230, 0.75);
      animation: none;
    }
    .encounter-target.hit::after { display: none; }
    .encounter-board.zodiac-mode .encounter-target:not(.is-current):not(.hit) {
      opacity: .3;
      transform: translate(-50%, -50%) scale(.5);
    }
    .encounter-target.is-guide::before { inset: 15px; border-width: 1px; background: #9bcbd1; box-shadow: 0 0 10px rgba(93,246,230,.55); }
    .encounter-target.is-stroke-start::before { border-color: #ffc857; box-shadow: 0 0 0 5px rgba(255,200,87,.12), 0 0 18px #ffc857; }
    .encounter-guide-line { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 180ms ease; }
    .encounter-board.show-guide .encounter-guide-line { opacity: 1; }
    .encounter-starfield { position: absolute; inset: 0; opacity: .32; pointer-events: none; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 31px 27px; }
    .encounter-board-hint {
      position: absolute;
      z-index: 3;
      left: 50%;
      bottom: 6px;
      padding: 3px 8px;
      border-radius: 999px;
      color: rgba(245, 251, 250, 0.62);
      background: rgba(4, 19, 31, 0.72);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.08em;
      transform: translateX(-50%);
      pointer-events: none;
      white-space: nowrap;
    }
    .encounter-status {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 8px;
    }
    .encounter-progress {
      min-width: 76px;
      padding: 5px 9px;
      text-align: center;
      border-radius: 999px;
      color: var(--night);
      background: var(--cyan);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
    }
    .encounter-accuracy {
      color: var(--paper);
      text-align: center;
      font-size: 9px;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }
    .encounter-energy {
      color: #f3c85b;
      font-size: 8px;
      font-weight: 750;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .player-nav {
      margin: 0 16px 8px; padding: 4px; display: grid;
      grid-template-columns: 1fr 1fr; gap: 4px;
      border: 1px solid rgba(93, 246, 230, 0.12); border-radius: 14px;
      background: rgba(4, 19, 31, 0.62);
    }
    .player-nav-button {
      min-height: 34px; border: 0; border-radius: 10px;
      color: var(--muted); background: transparent; font-size: 10px; font-weight: 850;
    }
    .player-nav-button.is-active {
      color: var(--night); background: var(--cyan);
      box-shadow: 0 0 20px rgba(93, 246, 230, 0.18);
    }
    .player-dashboard {
      margin: 22px 0 2px; padding: 19px;
      border: 1px solid rgba(93, 246, 230, 0.18); border-radius: 22px;
      background: radial-gradient(circle at 90% 4%, rgba(93, 246, 230, 0.1), transparent 35%), rgba(4, 19, 31, 0.78);
      scroll-margin-top: 16px;
    }
    .dashboard-hero { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
    .dashboard-avatar {
      width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px;
      color: #04202a; background: linear-gradient(145deg, #fff, var(--cyan) 65%, #3888ff);
      box-shadow: 0 0 24px rgba(93, 246, 230, 0.25); font-size: 24px; font-weight: 900;
    }
    .dashboard-kicker { margin: 0 0 3px; color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: 0.16em; }
    .dashboard-identity h2 { margin: 0; font-size: 19px; }
    .dashboard-identity span { color: var(--muted); font-size: 9px; }
    .dashboard-edit {
      padding: 7px 9px; border: 1px solid rgba(93, 246, 230, 0.22); border-radius: 999px;
      color: var(--cyan); background: rgba(93, 246, 230, 0.06); font-size: 8px; font-weight: 850;
    }
    .dashboard-level { margin: 16px 0; }
    .dashboard-level > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
    .dashboard-level b { color: var(--paper); }
    .dashboard-level-track { height: 7px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,0.08); }
    .dashboard-level-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc857, var(--cyan)); transition: width 260ms ease; }
    .dashboard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .dashboard-stat { padding: 9px 5px; display: grid; gap: 2px; text-align: center; border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; background: rgba(255,255,255,0.025); }
    .dashboard-stat strong { color: #fff; font-size: 17px; }
    .dashboard-stat span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
    .dashboard-next { margin: 14px 0 9px; padding: 10px 12px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; border: 1px solid rgba(255,200,87,0.18); border-radius: 14px; background: rgba(255,200,87,0.045); }
    .dashboard-next-symbol { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #2a1a00; background: #ffc857; font-size: 17px; font-weight: 950; }
    .dashboard-next div { display: grid; gap: 2px; }
    .dashboard-next small { color: #a99469; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
    .dashboard-next strong { font-size: 10px; }
    .dashboard-next > b { color: #ffd56d; font-size: 8px; }
    .dashboard-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .dashboard-game-card { padding: 9px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.07); border-radius: 13px; background: rgba(255,255,255,0.025); }
    .dashboard-game-card > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: var(--cyan); background: rgba(93,246,230,.08); }
    .dashboard-game-card div { min-width: 0; display: grid; gap: 2px; }
    .dashboard-game-card strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
    .dashboard-game-card small { color: var(--muted); font-size: 7px; }
    .dashboard-history { margin-top: 14px; }
    .dashboard-history > div:first-child { display: flex; justify-content: space-between; font-size: 9px; }
    .dashboard-history > div:first-child span { color: var(--muted); font-size: 7px; }
    .dashboard-history-list { margin-top: 7px; display: flex; gap: 5px; min-height: 30px; overflow-x: auto; }
    .dashboard-history-chip { padding: 6px 8px; flex: 0 0 auto; border-radius: 999px; color: var(--paper); background: rgba(255,255,255,.055); font-size: 7px; }
    .dashboard-history-empty { color: var(--muted); font-size: 8px; }
    .dashboard-private { margin: 13px 0 0; color: var(--muted); font-size: 7px; text-align: center; }
    .dashboard-private span { color: var(--cyan); }
    .sugar-arena, .memory-arena { position: absolute; inset: 0; overflow: hidden; }
    .sugar-target {
      position: absolute; left: var(--target-x); top: var(--target-y);
      width: 44px; height: 44px; display: grid; place-items: center;
      border: 2px solid rgba(255,255,255,.72); border-radius: 50%;
      color: #2d0a20; background: #ff7b8d; box-shadow: 0 0 22px rgba(255,87,120,.5);
      font-size: 18px; font-weight: 950; transform: translate(-50%, -50%) scale(var(--sugar-scale, 1));
      touch-action: manipulation; animation: sugar-wiggle 850ms ease-in-out infinite;
    }
    .sugar-target.healthy {
      color: #05242a; background: var(--cyan); box-shadow: 0 0 22px rgba(93,246,230,.48);
    }
    .sugar-combo { position: absolute; z-index: 4; top: 8px; right: 10px; color: #ffd56d; font-size: 10px; font-weight: 950; }
    .memory-arena { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px; }
    .memory-pad {
      border: 1px solid rgba(255,255,255,.15); border-radius: 18px; opacity: .55;
      transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease;
      touch-action: manipulation;
    }
    .memory-pad[data-pad="0"] { background: #5df6e6; }
    .memory-pad[data-pad="1"] { background: #ffc857; }
    .memory-pad[data-pad="2"] { background: #bf8cff; }
    .memory-pad[data-pad="3"] { background: #ff7084; }
    .memory-pad.is-lit { opacity: 1; transform: scale(.96); box-shadow: inset 0 0 18px #fff, 0 0 24px currentColor; }
    .memory-pad:disabled { cursor: default; }
    .memory-curtain {
      position: absolute; z-index: 5; inset: 0; display: grid; place-items: center;
      color: #fff; background: rgba(4,19,31,.62); font-size: 13px; font-weight: 950;
      pointer-events: none;
    }
    @keyframes sugar-wiggle { 0%,100% { margin-top: -2px; } 50% { margin-top: 3px; } }
    @keyframes encounter-float {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-7px) rotate(2deg); }
    }
    @keyframes encounter-pulse {
      0%, 100% { transform: scale(0.88); opacity: 0.78; }
      50% { transform: scale(1.12); opacity: 1; }
    }
    @keyframes encounter-mistake {
      50% { transform: translateX(3px); }
    }
    @keyframes defense-core-pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(0.94); }
      50% { transform: translate(-50%, -50%) scale(1.04); }
    }
    @keyframes boss-hover {
      0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) scale(0.96); }
      50% { transform: translate(-50%, -53%) rotate(2deg) scale(1.03); }
    }
    @keyframes daily-mission-toast {
      0% { opacity: 0; transform: translate(-50%, -8px) scale(0.96); }
      12%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -7px) scale(0.98); }
    }
    @media (prefers-reduced-motion: reduce) {
      .encounter-object,
      .encounter-target::before,
      .encounter-board,
      .daily-mission-toast,
      .daily-mission-track i,
      .weekly-track i { animation: none; transition: none; }
      .daily-mission-toast.visible { opacity: 1; transform: translate(-50%, 0); }
    }
    @media (max-width: 430px) {
      .daily-mission-panel { padding: 15px 11px; }
      .daily-mission-card { padding-inline: 7px; }
      .collection-panel { padding: 15px 11px; }
      .player-dashboard { padding: 15px 11px; }
      .dashboard-hero { grid-template-columns: 42px minmax(0, 1fr) auto; }
      .dashboard-stats { gap: 4px; }
      .dashboard-stat strong { font-size: 14px; }
      .guardian-collection { gap: 5px; }
      .zodiac-album { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .guardian-card { min-height: 104px; padding-inline: 4px; }
      .encounter-card { inset: 6px; padding-inline: 10px; }
      .encounter-energy { letter-spacing: 0; }
    }

#jawPauseDialog { border: 1px solid #5df6e6; border-radius: 20px; background: #071b24; color: white; padding: 28px; max-width: min(360px, 90vw); text-align: center; }
#jawPauseDialog::backdrop { background: #001019bb; }
#jawResume { min-height: 48px; padding: 12px 32px; border: 0; border-radius: 12px; background: #5df6e6; color: #071b24; font-weight: 800; }