/* Shared motion steps; durations, delays and easing stay with each effect. */
@keyframes motion-trace {
        from {
          stroke-dashoffset: 100;
        }
        to {
          stroke-dashoffset: 0;
        }
      }

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

@keyframes motion-scene-fade {
        0% {
          opacity: 0;
        }
        20%,
        78% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

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

@keyframes motion-reveal-fade {
        0% {
          opacity: 0;
        }
        25%,
        78% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }


      :root {
        color-scheme: dark;
        --bg: #121b18;
        --panel: #1c2924;
        --line: #b98f58;
        --red: #db6557;
        --black: #c8d4ca;
        --muted: #9caaa2;
        --gold: #e7bc6f;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background:
          radial-gradient(circle at 20% 5%, #2a4135, transparent 45%), var(--bg);
        color: #edf2ec;
        font:
          15px/1.55 "Microsoft YaHei",
          sans-serif;
      }
      button,
      input {
        font: inherit;
      }
      button {
        cursor: pointer;
      }
      .top {
        max-width: 1480px;
        margin: auto;
        padding: 16px 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
      }
      .top h1 {
        font:
          29px KaiTi,
          serif;
        margin: 0;
        color: #f3dfb1;
      }
      .sub,
      .muted {
        color: var(--muted);
        font-size: 13px;
      }
      .btn {
        border: 1px solid #4c665a;
        background: #294038;
        color: #eef5ef;
        border-radius: 8px;
        padding: 9px 14px;
        text-decoration: none;
      }
      .btn:hover {
        background: #355247;
      }
      .btn.primary {
        background: #d6b477;
        color: #1c271f;
        border-color: #d6b477;
        font-weight: 700;
      }
      .btn.danger {
        border-color: #8d504b;
        color: #ffbcb4;
        background: #3a2927;
      }
      .btn:disabled {
        opacity: 0.45;
        cursor: default;
      }
      .lobby {
        max-width: 900px;
        margin: 7vh auto;
        padding: 25px;
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 52px;
        align-items: center;
      }
      .hero h2 {
        font:
          38px KaiTi,
          serif;
        margin: 0 0 18px;
      }
      .hero p {
        color: #b6c4bb;
      }
      .card {
        background: #1b2a24;
        border: 1px solid #40594e;
        padding: 26px;
        border-radius: 16px;
      }
      .card label {
        display: block;
        margin: 12px 0 6px;
      }
      .card input {
        width: 100%;
        padding: 11px;
        border: 1px solid #4d665b;
        border-radius: 8px;
        background: #101a16;
        color: #fff;
      }
      .card .btn {
        width: 100%;
        margin-top: 13px;
      }
      .sep {
        text-align: center;
        color: #788c82;
        margin: 18px;
      }
      .error,
      .notice {
        padding: 10px 13px;
        border-radius: 8px;
        margin: 10px 0;
      }
      .error {
        background: #512c29;
        color: #ffc5bd;
      }
      .notice {
        background: #403a25;
        color: #ffe19e;
      }
      .shell {
        max-width: 1480px;
        margin: auto;
        padding: 0 18px 28px;
      }
      .waiting {
        background: var(--panel);
        border: 1px solid #40584d;
        border-radius: 14px;
        padding: 25px;
      }
      .seats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin: 20px 0;
      }
      .seat {
        padding: 18px;
        border: 1px solid #40584d;
        border-radius: 10px;
      }
      .game {
        display: grid;
        grid-template-columns: minmax(620px, 860px) minmax(300px, 1fr);
        gap: 18px;
        align-items: start;
      }
      .board-wrap {
        background: #18231f;
        border: 1px solid #41584e;
        border-radius: 14px;
        padding: 14px;
        overflow: auto;
      }
      .status {
        text-align: center;
        margin: 2px 0 10px;
        font-size: 16px;
      }
      .players-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        margin: 0 auto 9px;
        width: min(100%, 760px);
      }
      .player-card {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 8px 11px;
        border: 1px solid #ffffff16;
        border-radius: 10px;
        background: #08100db8;
        color: #dce5df;
      }
      .player-card.active {
        border-color: #d9b66a;
        box-shadow:
          inset 0 0 0 1px #d9b66a44,
          0 0 14px #d9b66a22;
      }
      .player-side {
        flex: 0 0 auto;
        padding: 2px 7px;
        border-radius: 999px;
        font-weight: 800;
        font-size: 12px;
      }
      .player-side.red {
        color: #ffd2cc;
        background: #8b2f293d;
        border: 1px solid #cf635955;
      }
      .player-side.black {
        color: #e8eeea;
        background: #7080782c;
        border: 1px solid #abb9b244;
      }
      .player-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .player-tags {
        margin-left: auto;
        display: flex;
        gap: 4px;
        flex: 0 0 auto;
      }
      .player-tag {
        padding: 1px 5px;
        border-radius: 5px;
        background: #ffffff0d;
        color: #aebcb4;
        font-size: 10px;
        font-style: normal;
      }
      .player-card.active .turn-tag {
        background: #d9b66a;
        color: #25180d;
        font-weight: 800;
      }
      .board {
        position: relative;
        width: min(78vw, 760px);
        aspect-ratio: 8/9;
        margin: auto;
        background: #d7b47c;
        border: 8px solid #76522f;
        box-shadow: 0 12px 35px #0008;
      }
      .board svg {
        position: absolute;
        inset: 5%;
        width: 90%;
        height: 90%;
        overflow: visible;
      }
      .piece,
      .point,
      .target {
        position: absolute;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: 3;
      }
      .piece {
        width: 7.7%;
        aspect-ratio: 1;
        background: #ead8ad;
        border: 2px solid #5b4630;
        color: #292319;
        font:
          bold clamp(12px, 2.1vw, 23px) KaiTi,
          serif;
        box-shadow: 1px 2px 5px #5438;
        display: grid;
        place-items: center;
        padding: 0;
      }
      .piece.red {
        color: #b4372b;
        border-color: #a24235;
      }
      .piece.neutral {
        color: #173c35;
        border-color: #3f806e;
        background: radial-gradient(
          circle at 35% 28%,
          #d9ead8,
          #94b9a8 66%,
          #52796b
        );
        box-shadow:
          inset 0 0 0 3px #efffe055,
          0 2px 8px #173c3588;
      }
      .piece.sel {
        outline: 4px solid #fff2a8;
        z-index: 4;
      }
      .piece.last {
        box-shadow: 0 0 0 4px #59b8a5;
      }
      .piece.can-capture {
        outline: 4px solid #df2f2f;
        outline-offset: 3px;
        box-shadow: 0 0 14px #f04444;
        z-index: 5;
      }
      .point {
        width: 3%;
        aspect-ratio: 1;
        background: #f4ca55;
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: 0 0 12px #ffd86f;
      }
      .btn:focus-visible,
      .target:focus-visible {
        outline: 2px solid #e8cf98;
        outline-offset: 3px;
      }
      .target {
        width: 4%;
        aspect-ratio: 1;
        background: #2fa38caa;
        border: 1px solid #d8fff7;
      }
      .side {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .panel {
        background: var(--panel);
        border: 1px solid #40584d;
        border-radius: 12px;
        padding: 15px;
      }
      .panel h3 {
        margin: 0 0 10px;
        font:
          21px KaiTi,
          serif;
        color: #f0d6a5;
      }
      .skills {
        max-height: 48vh;
        overflow: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
      }
      .skill {
        border-top: 1px solid #354a41;
        padding: 10px 0;
      }
      .skill:first-child {
        border: 0;
      }
      .skill b {
        color: var(--gold);
      }
      .skill p {
        margin: 3px 0;
        color: #aebdb4;
        font-size: 12px;
      }
      .skill .btn {
        padding: 5px 10px;
        font-size: 12px;
      }
      .logs {
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        max-height: 180px;
        overflow: auto;
        color: #aebdb4;
        font-size: 12px;
      }
      .logs div {
        padding: 4px 0;
        border-bottom: 1px solid #2d4038;
      }
      .room-actions {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
      }
      .modal {
        position: fixed;
        inset: 0;
        background: #07100dcc;
        display: grid;
        place-items: center;
        z-index: 20;
      }
      .modal > div {
        width: min(760px, calc(100vw - 24px));
        max-width: 760px;
        margin: 20px;
        background: #203129;
        border: 1px solid #607b6d;
        border-radius: 14px;
        padding: 24px;
      }
      .rules {
        max-height: 70vh;
        overflow: auto;
      }
      .rules li {
        margin-bottom: 9px;
      }
      .piece-guide {
        padding-left: 20px;
      }
      .piece-guide b {
        color: var(--gold);
      }
      .hidden {
        display: none !important;
      }
      @media (max-width: 950px) {
        .game {
          grid-template-columns: 1fr;
        }
        .board {
          width: min(92vw, 700px);
        }
        .lobby {
          grid-template-columns: 1fr;
          margin: 20px auto;
          gap: 15px;
        }
        .skills {
          max-height: 300px;
        }
      }
      @media (max-width: 650px) {
        .game {
          display: block;
        }
        .side {
          margin-top: 12px;
        }
        .board-wrap {
          padding: 6px;
        }
        .board {
          width: 95vw;
          border-width: 5px;
        }
        .piece {
          font-size: 13px;
        }
        .top {
          padding: 12px;
        }
        .shell {
          padding: 0 5px;
        }
        .seats {
          grid-template-columns: 1fr;
        }
      }
      .ice-river {
        position: absolute;
        left: 5%;
        top: 44.5%;
        width: 90%;
        height: 11%;
        z-index: 2;
        pointer-events: none;
        display: grid;
        place-items: center;
        color: #e9fbff;
        font-size: clamp(16px, 3vw, 30px);
        letter-spacing: 1.1em;
        text-shadow:
          0 0 8px #fff,
          0 0 15px #35bfff;
        background: linear-gradient(100deg, #b9f4ffbb, #4dbde5cc, #e7fcffbb);
        border-top: 2px solid #efffff;
        border-bottom: 2px solid #77dcff;
        box-shadow: 0 0 18px #69dafa;
        animation: iceGlow 1.4s ease-in-out infinite alternate;
      }
      .lightning {
        position: absolute;
        transform: translate(-50%, -50%);
        z-index: 8;
        pointer-events: none;
        font-size: clamp(24px, 5vw, 54px);
        color: #fff57b;
        text-shadow:
          0 0 8px #fff,
          0 0 18px #58bfff;
        animation: thunder 1.7s ease-out forwards;
      }
      .piece.sleeping {
        filter: saturate(0.45) brightness(1.2);
        box-shadow:
          0 0 0 4px #a9eaff,
          0 0 20px #59caff;
      }
      .piece.sleeping:after {
        content: "Z";
        position: absolute;
        right: -8px;
        top: -14px;
        color: #dff8ff;
        text-shadow: 0 0 5px #148aca;
        font: 700 14px sans-serif;
      }
      .piece.long-name {
        font-size: clamp(8px, 1.35vw, 14px);
      }
      @keyframes iceGlow {
        to {
          filter: brightness(1.25);
          box-shadow: 0 0 28px #b8f6ff;
        }
      }
      @keyframes thunder {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        12%,
        58% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.25);
        }
        25%,
        70% {
          opacity: 0.25;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.85);
        }
      }
      .auth-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 12px;
      }
      .auth-tabs .btn {
        flex: 1;
      }
      .chat-box {
        max-height: 240px;
        overflow: auto;
        background: #111b17;
        border: 1px solid #354a41;
        border-radius: 8px;
        padding: 8px;
      }
      .chat-line {
        padding: 5px 2px;
        border-bottom: 1px solid #263a31;
        overflow-wrap: anywhere;
      }
      .chat-line b {
        color: #e6c27e;
      }
      .chat-line .watcher {
        color: #83c9df;
      }
      .chat-send {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 7px;
        margin-top: 8px;
      }
      .chat-send input {
        min-width: 0;
        padding: 9px;
        border: 1px solid #4d665b;
        border-radius: 8px;
        background: #101a16;
        color: #fff;
      }
      .chat-dock {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 18;
        width: min(360px, calc(100vw - 24px));
        filter: drop-shadow(0 18px 36px #0009);
      }
      .chat-dock:empty {
        display: none;
      }
      .chat-dock .chat-panel {
        padding: 13px;
        background: #15211def;
        backdrop-filter: blur(16px);
        border-color: #d1ad6650;
      }
      .chat-dock-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .chat-dock-head h3 {
        margin: 0;
      }
      .chat-toggle {
        padding: 4px 10px;
        border-radius: 999px;
      }
      .chat-dock.collapsed {
        width: auto;
        min-width: 138px;
      }
      .chat-dock.collapsed .chat-box,
      .chat-dock.collapsed .chat-send {
        display: none;
      }
      .chat-dock.collapsed .chat-panel {
        padding: 10px 12px;
      }
      .rank-table {
        width: 100%;
        border-collapse: collapse;
      }
      .rank-table th,
      .rank-table td {
        padding: 8px 10px;
        border-bottom: 1px solid #354a41;
        text-align: left;
      }
      .rank-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
      }
      .rank-body {
        max-height: 55vh;
        overflow: auto;
      }
      .account-name {
        color: #f0d6a5;
        font-weight: 700;
      }
      .piece.emperor {
        overflow: visible;
        background: radial-gradient(
          circle at 38% 28%,
          #fff9da 0 16%,
          #f2d68d 38%,
          #c99335 73%,
          #75501f 100%
        );
        border: 2px solid #6f4618;
        color: transparent !important;
        font-size: 0 !important;
        box-shadow:
          inset 0 0 0 3px #fff0bd,
          inset 0 0 0 5px #b77a25,
          0 0 0 2px #dfb65d,
          0 4px 10px #3b260d99,
          0 0 15px #e7bd6466;
      }
      .piece.emperor:before {
        content: "玉皇";
        position: absolute;
        left: 50%;
        top: 16%;
        transform: translateX(-50%);
        z-index: 1;
        white-space: nowrap;
        color: #7b251d;
        text-shadow: 0 1px #fff2c7;
        font:
          700 clamp(6px, 0.8vw, 10px) / 1 "Microsoft YaHei",
          sans-serif;
        letter-spacing: 0.08em;
      }
      .piece.emperor:after {
        content: "帝";
        position: absolute;
        inset: 19% 0 0;
        z-index: 1;
        display: grid;
        place-items: center;
        color: #711b16;
        text-shadow:
          0 1px #fff3c2,
          0 0 5px #fff1bd;
        font:
          900 clamp(18px, 2.7vw, 29px) / 1 KaiTi,
          STKaiti,
          serif;
      }
      .piece.yin-piece {
        background: radial-gradient(
          circle at 35% 28%,
          #747b7d,
          #303638 62%,
          #15191a
        );
        border-color: #9ca4a5;
        color: #eef2f2;
        text-shadow: 0 1px 3px #000;
        box-shadow: 0 0 12px #111;
      }
      .piece.frozen-mark:after {
        content: "定";
        position: absolute;
        inset: -9px;
        display: grid;
        place-items: center;
        border: 3px solid #57caff;
        border-radius: 50%;
        color: #eaffff;
        background: #137ca855;
        text-shadow: 0 0 8px #fff;
        font: 900 clamp(18px, 3vw, 34px) KaiTi;
        animation: freezePulse 1s ease-in-out infinite alternate;
      }
      .piece.shielded:before {
        content: "🛡";
        position: absolute;
        inset: -12px;
        display: grid;
        place-items: center;
        border: 3px solid #ffd95c;
        border-radius: 50%;
        font-size: clamp(22px, 3.5vw, 38px);
        color: #ffe888;
        text-shadow:
          0 0 9px #fff,
          0 0 18px #f5bb21;
        opacity: 0.82;
        animation: shieldPulse 1.2s ease-in-out infinite alternate;
      }
      .fx-cell {
        position: absolute;
        transform: translate(-50%, -50%);
        z-index: 11;
        pointer-events: none;
        font-style: normal;
      }
      
      
      .fx-avada {
        width: 8%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #dfff93;
        box-shadow:
          0 0 12px #fff,
          0 0 38px 18px #39ff45;
        animation: fxAvada 2.2s ease-out forwards;
      }
      .fx-avada:after {
        content: "";
        position: absolute;
        width: 420%;
        height: 12%;
        right: 35%;
        top: 44%;
        background: linear-gradient(90deg, transparent, #91ff67, #efffd4);
        box-shadow: 0 0 13px #46ff3b;
        transform: rotate(-28deg);
        transform-origin: right;
      }
      
      .fx-six {
        font: 1000 clamp(44px, 10vw, 120px) sans-serif;
        color: #ffe15d;
        text-shadow:
          0 0 7px #fff,
          0 0 24px #ff8c00,
          6px 6px 0 #9a2a00;
        animation: fxSix 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      
      
      
      
      .fx-cart-lane {
        position: absolute;
        top: 0;
        height: 100%;
        width: 9%;
        z-index: 12;
        pointer-events: none;
        overflow: visible;
        transform: translateX(-50%);
        border-left: 2px dashed #f8dc9d99;
        border-right: 2px dashed #f8dc9d99;
        background: linear-gradient(
          90deg,
          transparent,
          #ffe4a733 28%,
          #fff0bd66 50%,
          #ffe4a733 72%,
          transparent
        );
        box-shadow:
          inset 0 0 16px #fff2c555,
          0 0 14px #70431677;
        animation: fxCartLane 2.8s ease-out forwards;
      }
      .fx-cart-vehicle {
        position: absolute;
        left: 50%;
        top: var(--cart-from);
        width: 80%;
        aspect-ratio: 1.25;
        transform: translate(-50%, -50%) rotate(var(--cart-angle));
        filter: drop-shadow(0 7px 5px #0009);
        animation: fxCartRide 2.55s cubic-bezier(0.16, 0.7, 0.22, 1) forwards;
      }
      .fx-cart-vehicle:before {
        content: "推";
        position: absolute;
        inset: 10% 5% 28%;
        display: grid;
        place-items: center;
        border: 3px solid #613a18;
        border-radius: 20% 20% 8% 8%;
        background: linear-gradient(135deg, #f1c277, #a85d28 55%, #6c3518);
        box-shadow:
          inset 0 0 0 3px #ffd99b66,
          0 3px 7px #241006aa;
        color: #4e210c;
        text-shadow: 0 1px #ffe2aa;
        font: 900 clamp(14px, 2.5vw, 27px) KaiTi;
      }
      .fx-cart-vehicle:after {
        content: "●　●";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        white-space: nowrap;
        color: #2d211b;
        text-shadow: 0 0 3px #f7c56e;
        font: 900 clamp(13px, 2vw, 23px) sans-serif;
        letter-spacing: -0.05em;
      }
      
      .fx-cart-dust {
        position: absolute;
        left: 50%;
        top: var(--dust-y);
        transform: translate(-50%, -50%);
        width: 115%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          #fff2c4cc 0 12%,
          #d5a45f99 35%,
          transparent 70%
        );
        filter: blur(2px);
        animation: fxCartDust 1.1s ease-out var(--dust-delay) both;
      }
      .fx-cart-debris {
        color: #ffe0a3;
        text-shadow:
          0 0 5px #5b2c0a,
          0 0 11px #ffb24a;
        font: 900 clamp(20px, 4vw, 45px) serif;
        animation: fxCartDebris 2.15s ease-out forwards;
      }
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      @keyframes freezePulse {
        to {
          filter: brightness(1.35);
          box-shadow: 0 0 18px #8eeaff;
        }
      }
      @keyframes shieldPulse {
        to {
          transform: scale(1.12);
          opacity: 1;
        }
      }
      
      
      @keyframes fxAvada {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        25%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.3);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2);
        }
      }
      
      @keyframes fxSix {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(4) rotate(-15deg);
        }
        35%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(3deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.7);
        }
      }
      
      
      
      @keyframes fxCartLane {
        0% {
          opacity: 0;
          filter: brightness(2);
        }
        12%,
        78% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          filter: brightness(0.8);
        }
      }
      @keyframes fxCartRide {
        0% {
          top: var(--cart-from);
          opacity: 0;
          transform: translate(-50%, -50%) rotate(var(--cart-angle)) scale(0.62);
        }
        9% {
          opacity: 1;
        }
        84% {
          opacity: 1;
        }
        100% {
          top: var(--cart-to);
          opacity: 0;
          transform: translate(-50%, -50%) rotate(var(--cart-angle)) scale(1.08);
        }
      }
      
      @keyframes fxCartDust {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.15);
        }
        24% {
          opacity: 0.9;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2.1);
        }
      }
      @keyframes fxCartDebris {
        0% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(0.25) rotate(0);
        }
        45% {
          opacity: 1;
          transform: translate(-50%, -80%) scale(1.25) rotate(155deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, 40%) scale(0.7) rotate(310deg);
        }
      }

      .piece.holy-shield {
        box-shadow:
          0 0 0 4px #fff4a6,
          0 0 22px #58dfff;
      }
      .piece.holy-shield:before {
        content: "✦";
        position: absolute;
        inset: -11px;
        border: 3px solid #c8fbff;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #fff7ac;
        text-shadow: 0 0 10px #55ddff;
        animation: shieldPulse 1s ease-in-out infinite alternate;
      }
      .piece.momentum-shield {
        box-shadow:
          0 0 0 4px #ffce55,
          0 0 24px #ff781f;
      }
      .piece.momentum-shield:after {
        content: "势";
        position: absolute;
        right: -10px;
        top: -13px;
        color: #fff7a8;
        font-weight: 900;
        text-shadow: 0 0 7px #f30;
      }
      .piece.slowed-piece {
        filter: saturate(0.45);
        box-shadow:
          0 0 0 4px #9160d8,
          0 0 18px #7229c9;
      }
      .piece.revive-piece {
        box-shadow:
          0 0 0 4px #e86767,
          0 0 20px #ff2525;
      }
      .piece.tomb-piece {
        background: #4c4544;
        color: #e5d6c5;
        border-color: #211d1c;
      }
      .piece.spirit-piece {
        background: #c6f9ee;
        color: #186b6c;
        border-color: #52d9cc;
        box-shadow: 0 0 18px #6affec;
      }
      .piece.chaser-piece {
        box-shadow:
          0 0 0 4px #ff8b39,
          0 0 22px #ff4d13;
      }
      .fx-bound-row {
        position: absolute;
        left: 5%;
        width: 90%;
        height: 8%;
        transform: translateY(-50%);
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          transparent,
          #7b2dc099,
          #e254ffbb,
          #7b2dc099,
          transparent
        );
        border-top: 2px solid #e8a6ff;
        border-bottom: 2px solid #e8a6ff;
        box-shadow: 0 0 18px #ac44e6;
      }
      .fx-barrier-zone {
        position: absolute;
        width: 33.75%;
        height: 30%;
        transform: translate(-50%, -50%);
        z-index: 2;
        pointer-events: none;
        border: 4px solid #8defff;
        border-radius: 18px;
        background: #37cfe522;
        box-shadow:
          inset 0 0 22px #54efff,
          0 0 18px #45cfe8;
      }
      .music-volume {
        width: 82px;
        accent-color: #d8a640;
        vertical-align: middle;
      }
      .mode-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
      }
      .mode-card {
        display: block;
        width: 100%;
        min-height: 112px;
        padding: 15px;
        text-align: left;
        border: 1px solid #4c665a;
        border-radius: 12px;
        background: linear-gradient(145deg, #253d34, #192a23);
        color: #edf2ec;
        text-decoration: none;
        transition:
          0.15s transform,
          0.15s border-color,
          0.15s background;
      }
      .mode-card:hover {
        transform: translateY(-2px);
        border-color: #d6b477;
        background: linear-gradient(145deg, #304d41, #21372e);
      }
      .mode-card b {
        display: block;
        margin-bottom: 5px;
        color: #f1d59f;
        font:
          21px KaiTi,
          serif;
      }
      .mode-card span {
        display: block;
        color: #aebdb4;
        font-size: 12px;
        line-height: 1.55;
      }
      .mode-card.test {
        background: linear-gradient(145deg, #3a3150, #25223a);
        border-color: #6e5f8b;
      }
      .skill-time {
        display: block;
        margin-bottom: 5px;
        color: #d9bb7b;
        font-size: 13px;
        font-weight: 600;
      }
      
.tech-overlay {
        position: absolute;
        z-index: 3;
        pointer-events: none;
        overflow: hidden;
      }
      .tech-aim {
        fill: none;
        stroke: #3d7787;
        stroke-width: 0.35;
        stroke-dasharray: 0.8 1.6;
        opacity: 0.65;
      }
      .tech-aim-tick {
        fill: none;
        stroke: #3d7787;
        stroke-width: 0.4;
        opacity: 0.6;
      }
      .tech-event {
        pointer-events: none;
        animation: tech-fade 1.15s ease-out both;
      }
      .tech-opening {
        transform-origin: 0 0;
        animation: tech-open 0.8s ease-out both;
        animation-delay: calc(var(--gate) * 60ms);
      }
      .tech-ripple {
        transform-origin: 0 0;
        animation: tech-ripple 0.85s ease-out both;
      }
      .tech-charging {
        animation: tech-charge 0.8s ease-out both;
        transform-origin: 0 0;
      }
      .tech-induction {
        animation: tech-induction 0.8s ease-out both;
        transform-origin: 0 0;
      }
      .tech-beam-wash {
        stroke: #538d9755;
        stroke-width: 3;
        fill: none;
      }
      .tech-beam-edge {
        stroke: #37798e;
        stroke-width: 0.5;
        fill: none;
      }
      .tech-beam-core {
        stroke: #fff4ca;
        stroke-width: 0.75;
        fill: none;
        stroke-dasharray: 100;
        animation: motion-trace 0.28s ease-out both;
      }
      .tech-discharge {
        animation: tech-discharge 0.75s ease-out both;
      }
      .tech-hit {
        animation: tech-hit 0.65s ease-out both;
        animation-delay: calc(var(--step) * 16ms);
        transform-origin: 0 0;
      }
      .tech-end {
        animation: tech-end 0.65s 0.12s ease-out both;
        transform-origin: 0 0;
      }
      @keyframes tech-fade {
        0% {
          opacity: 0;
        }
        12%,
        62% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes tech-open {
        0% {
          transform: scale(0.35, 0.8);
          opacity: 0;
        }
        65% {
          transform: scale(1.08, 1);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0;
        }
      }
      @keyframes tech-ripple {
        0% {
          transform: scale(0.7);
          opacity: 0;
        }
        30% {
          opacity: 0.8;
        }
        100% {
          transform: scale(1.45);
          opacity: 0;
        }
      }
      @keyframes tech-charge {
        0% {
          transform: scale(1.3);
          opacity: 0;
        }
        65% {
          transform: scale(0.92);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0;
        }
      }
      @keyframes tech-induction {
        from {
          transform: rotate(-35deg);
        }
        to {
          transform: rotate(25deg);
        }
      }
      
      @keyframes tech-discharge {
        0% {
          opacity: 0;
        }
        18%,
        48% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes tech-hit {
        0% {
          transform: scale(0.88);
          opacity: 0;
        }
        40% {
          opacity: 1;
        }
        100% {
          transform: scale(1.3);
          opacity: 0;
        }
      }
      @keyframes tech-end {
        0% {
          transform: scale(0.4);
          opacity: 0;
        }
        35% {
          opacity: 1;
        }
        100% {
          transform: scale(1.4);
          opacity: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .tech-event {
          animation: skill-event-static 0.35s linear both;
        }
        .tech-event * {
          animation: none !important;
        }
      }

      
      @media (max-width: 520px) {
        .mode-grid {
          grid-template-columns: 1fr;
        }
      }
      
/* 2026 visual refresh */
      :root {
        --bg: #0a100e;
        --panel: #141d19;
        --panel-2: #192620;
        --line: #765f3c;
        --red: #d85a4f;
        --muted: #9aa79f;
        --gold: #e4bc72;
        --cream: #f4ead3;
        --jade: #6fae91;
      }
      html {
        min-height: 100%;
        background: #080d0b;
      }
      body {
        min-height: 100vh;
        position: relative;
        overflow-x: hidden;
        background:
          radial-gradient(ellipse at 8% 5%, #294739 0, transparent 34%),
          radial-gradient(ellipse at 90% 30%, #182b24 0, transparent 38%),
          linear-gradient(145deg, #0c1511 0%, #08100d 58%, #111813 100%);
        color: #ece9df;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
      }
      body:before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.3;
        background-image:
          linear-gradient(
            90deg,
            transparent 49.8%,
            #d8bc7a0a 50%,
            transparent 50.2%
          ),
          linear-gradient(#ffffff05 1px, transparent 1px);
        background-size:
          160px 100%,
          100% 6px;
        mix-blend-mode: screen;
      }
      body:after {
        content: "楚河　　　　汉界";
        position: fixed;
        left: -3vw;
        bottom: -4vh;
        color: #d9bd7938;
        font:
          900 clamp(80px, 15vw, 230px) / 1 KaiTi,
          STKaiti,
          serif;
        letter-spacing: 0.05em;
        white-space: nowrap;
        pointer-events: none;
        transform: rotate(-4deg);
      }
      .top {
        position: relative;
        z-index: 12;
        max-width: 1500px;
        padding: 22px 30px;
        border-bottom: 1px solid #d6b36a1c;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 13px;
        color: inherit;
        text-decoration: none;
      }
      .brand-mark {
        width: 50px;
        height: 50px;
        display: grid;
        place-items: center;
        border: 1px solid #cfae6b;
        border-radius: 50%;
        background: radial-gradient(
          circle at 34% 28%,
          #f5e5bb,
          #c9994f 68%,
          #765027
        );
        color: #4a2119;
        font:
          900 27px KaiTi,
          serif;
        box-shadow:
          inset 0 0 0 4px #27180d44,
          0 8px 28px #0008,
          0 0 22px #d2aa5e22;
      }
      .top h1 {
        font:
          700 28px/1.05 KaiTi,
          STKaiti,
          serif;
        letter-spacing: 0.18em;
        color: #f1dfb6;
        text-shadow: 0 2px 12px #000;
        margin: 0 0 5px;
      }
      .top .sub {
        letter-spacing: 0.11em;
        color: #88988f;
        font-size: 11px;
      }
      .room-actions {
        align-items: center;
      }
      .room-actions > .btn {
        background: #ffffff08;
        border-color: #ffffff18;
        backdrop-filter: blur(12px);
        border-radius: 999px;
        padding: 9px 16px;
        color: #dfe8e1;
      }
      .room-actions > .btn:hover {
        background: #e2bc7018;
        border-color: #d9b66a88;
        color: #f3dca8;
        transform: translateY(-1px);
      }
      .room-actions > .btn.primary {
        background: linear-gradient(135deg, #eed08f, #c28c42);
        border-color: #edcf8c;
        color: #24170c;
      }
      .music-volume {
        height: 4px;
      }
      .lobby {
        position: relative;
        z-index: 2;
        max-width: 1180px;
        min-height: calc(100vh - 108px);
        margin: 0 auto;
        padding: 7vh 34px 11vh;
        grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.75fr);
        gap: 76px;
      }
      .hero {
        position: relative;
        isolation: isolate;
      }
      .eyebrow {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 21px;
        color: #d6b56f;
        font:
          700 11px/1.2 Arial,
          sans-serif;
        letter-spacing: 0.22em;
      }
      .eyebrow:before {
        content: "";
        width: 42px;
        height: 1px;
        background: #d6b56f;
      }
      .hero h2 {
        max-width: 720px;
        margin: 0 0 22px;
        color: #f1eee5;
        font:
          700 clamp(42px, 5.3vw, 76px) / 1.08 KaiTi,
          STKaiti,
          serif;
        letter-spacing: 0.025em;
        text-shadow: 0 8px 30px #000;
      }
      .hero h2 span {
        color: #e2b963;
        background: linear-gradient(180deg, #f5dda4, #c9923e);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hero > p {
        max-width: 610px;
        margin: 0;
        color: #aab7af;
        font-size: 16px;
        line-height: 1.9;
      }
      .hero-features {
        display: flex;
        gap: 11px;
        flex-wrap: wrap;
        margin-top: 28px;
      }
      .hero-features span {
        padding: 8px 13px;
        border: 1px solid #ffffff15;
        border-radius: 999px;
        background: #ffffff08;
        color: #c4d0c8;
        font-size: 12px;
        box-shadow: inset 0 1px #ffffff08;
      }
      .hero-pieces {
        display: flex;
        gap: 12px;
        margin-top: 44px;
      }
      .hero-pieces i {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: radial-gradient(
          circle at 35% 28%,
          #f4e4bd,
          #c9aa72 70%,
          #907047
        );
        border: 2px solid #80613e;
        box-shadow:
          inset 0 0 0 4px #f6e4b54a,
          0 10px 22px #0007;
        color: #6d251f;
        font:
          900 25px KaiTi,
          serif;
        font-style: normal;
      }
      .hero-pieces i:nth-child(2n) {
        color: #1d2923;
      }
      .hero-pieces i:last-child {
        transform: translateY(-14px) scale(1.16);
        box-shadow:
          inset 0 0 0 4px #f6e4b54a,
          0 15px 32px #0009,
          0 0 24px #d3a65433;
      }
      .card {
        position: relative;
        overflow: hidden;
        padding: 30px 30px 32px;
        border: 1px solid #cfaf6d35;
        border-radius: 22px;
        background: linear-gradient(145deg, #1b2923e8, #101915f2);
        box-shadow:
          0 30px 80px #0009,
          inset 0 1px #ffffff0d;
        backdrop-filter: blur(18px);
      }
      .card:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #e1bd70, transparent);
      }
      .card-kicker {
        color: #8f9e95;
        font:
          700 10px Arial,
          sans-serif;
        letter-spacing: 0.22em;
      }
      .card-title {
        margin: 7px 0 20px;
        color: #f0dfba;
        font:
          700 28px KaiTi,
          serif;
      }
      .card label {
        color: #bbc7bf;
        font-size: 13px;
        margin: 14px 0 7px;
      }
      .card input,
      .chat-send input {
        padding: 13px 14px;
        border: 1px solid #ffffff18;
        border-radius: 11px;
        background: #08100dc9;
        color: #fff;
        outline: none;
        transition:
          0.2s border-color,
          0.2s box-shadow;
      }
      .card input:focus,
      .chat-send input:focus {
        border-color: #d7b36f;
        box-shadow: 0 0 0 3px #d7b36f20;
      }
      .card .btn {
        border-radius: 11px;
        min-height: 46px;
      }
      .btn {
        transition:
          0.18s transform,
          0.18s background,
          0.18s border-color,
          0.18s box-shadow;
      }
      .btn.primary {
        background: linear-gradient(135deg, #ebcb87, #bd8640);
        border-color: #e3c17a;
        color: #21160c;
        box-shadow: 0 9px 22px #0004;
      }
      .btn.primary:hover {
        background: linear-gradient(135deg, #f5d998, #ca934b);
        box-shadow: 0 12px 28px #0006;
        transform: translateY(-1px);
      }
      .auth-tabs {
        padding: 4px;
        border: 1px solid #ffffff12;
        border-radius: 13px;
        background: #070e0c;
      }
      .auth-tabs .btn {
        margin: 0;
        min-height: 40px;
        border: 0;
        border-radius: 9px;
        background: transparent;
      }
      .auth-tabs .btn.primary {
        background: #d9b46f;
        color: #24170d;
        box-shadow: 0 5px 16px #0005;
      }
      .mode-lobby {
        grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.65fr);
        align-items: center;
      }
      .mode-lobby .hero h2 {
        font-size: clamp(40px, 4.6vw, 64px);
      }
      .mode-grid {
        gap: 12px;
        margin-top: 30px;
      }
      .mode-card {
        position: relative;
        overflow: hidden;
        min-height: 132px;
        padding: 20px;
        border-color: #ffffff16;
        border-radius: 16px;
        background: linear-gradient(145deg, #1d2d26, #111a16);
        box-shadow: 0 14px 32px #0004;
        transition:
          0.2s transform,
          0.2s border-color,
          0.2s box-shadow;
      }
      .mode-card:before {
        content: "01";
        position: absolute;
        right: 13px;
        top: 7px;
        color: #ffffff0b;
        font:
          900 46px Georgia,
          serif;
      }
      .mode-card:nth-child(2):before {
        content: "02";
      }
      .mode-card:nth-child(3):before {
        content: "03";
      }
      .mode-card:nth-child(4):before {
        content: "04";
      }
      .mode-card:hover {
        transform: translateY(-4px);
        border-color: #d5ae63aa;
        background: linear-gradient(145deg, #294137, #17251f);
        box-shadow: 0 22px 42px #0007;
      }
      .mode-card b {
        position: relative;
        font:
          700 24px KaiTi,
          serif;
        color: #efd293;
      }
      .mode-card span {
        position: relative;
        max-width: 88%;
        color: #9eada4;
        font-size: 13px;
      }
      .mode-card.test {
        background: linear-gradient(145deg, #2b2540, #181526);
        border-color: #8b71be55;
      }
      .shell {
        position: relative;
        z-index: 2;
      }
      .waiting,
      .panel,
      .board-wrap {
        border-color: #ffffff13;
        background: linear-gradient(145deg, #18241fef, #101914f5);
        box-shadow:
          0 18px 45px #0005,
          inset 0 1px #ffffff0a;
      }
      .waiting {
        border-radius: 20px;
        padding: 30px;
      }
      .seat {
        border-color: #ffffff14;
        border-radius: 14px;
        background: #ffffff04;
      }
      .game {
        gap: 22px;
      }
      .board-wrap {
        border-radius: 20px;
        padding: 18px;
      }
      .status {
        min-height: 38px;
        padding: 8px 12px;
        border-radius: 11px;
        background: #080f0cb8;
        color: #d9e2dc;
      }
      .board {
        border: 10px solid #5f4128;
        border-radius: 4px;
        background: linear-gradient(90deg, #d6b477, #e2c28b 48%, #d4ae70);
        box-shadow:
          0 24px 60px #000b,
          0 0 0 1px #cfaa6d;
      }
      .panel {
        border-radius: 16px;
        padding: 17px;
      }
      .panel h3 {
        color: #edd49f;
      }
      .skill {
        border-color: #ffffff0e;
      }
      .modal {
        backdrop-filter: blur(9px);
        background: #030806d9;
      }
      .modal > div {
        border-color: #d0ae6955;
        border-radius: 22px;
        background: linear-gradient(145deg, #1a2922, #101813);
        box-shadow: 0 30px 100px #000c;
      }
      .chat-box {
        border-color: #ffffff13;
        background: #080f0c;
      }
      .notice {
        border: 1px solid #dbbd7045;
        background: #d2a94d13;
        color: #f0d79d;
      }
      .error {
        border: 1px solid #e2716740;
        background: #7c2f2a30;
      }
      .rank-table th {
        color: #e5c47c;
      }
      .rank-table td {
        border-color: #ffffff0e;
      }
      @media (max-width: 950px) {
        .top {
          padding: 16px 18px;
        }
        .lobby {
          min-height: auto;
          padding: 42px 22px 70px;
          grid-template-columns: 1fr;
          gap: 34px;
        }
        .auth-lobby .hero-pieces {
          display: none;
        }
        .mode-lobby .card {
          max-width: none;
        }
        .game {
          grid-template-columns: 1fr;
        }
        .board-wrap {
          padding: 10px;
        }
      }
      @media (max-width: 650px) {
        body:after {
          font-size: 82px;
          bottom: 3vh;
        }
        .top {
          align-items: flex-start;
        }
        .brand-mark {
          width: 42px;
          height: 42px;
          font-size: 23px;
        }
        .top h1 {
          font-size: 24px;
        }
        .room-actions {
          width: 100%;
          gap: 6px;
        }
        .room-actions > .btn {
          padding: 8px 11px;
          font-size: 12px;
        }
        .music-volume {
          width: 58px;
        }
        .lobby {
          padding: 32px 15px 60px;
        }
        .hero h2 {
          font-size: 42px;
        }
        .hero > p {
          font-size: 14px;
        }
        .hero-features {
          margin-top: 20px;
        }
        .card {
          padding: 23px 19px;
        }
        .mode-grid {
          grid-template-columns: 1fr;
        }
        .mode-card {
          min-height: 108px;
          padding: 16px;
        }
        .board {
          width: 93vw;
          border-width: 6px;
        }
        .board-wrap,
.panel {
          border-radius: 12px;
        }
      }

.win-estimate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 1px;
  color: var(--muted, #8b9296);
  font-size: 12px;
}
.win-estimate i {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 3px;
  background: #657484;
}
.win-estimate b {
  display: block;
  height: 100%;
  background: #c87969;
}
.win-estimate span {
  white-space: nowrap;
}

/* Refined skill effects: compact geometry and particles instead of screen-filling words. */
      .fx-scene {
        position: absolute;
        inset: 0;
        z-index: 10;
        pointer-events: none;
        overflow: hidden;
      }
      .fx-mark {
        position: absolute;
        width: 9.5%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        z-index: 12;
        pointer-events: none;
        border-radius: 50%;
      }
      .fx-mark:before,
      .fx-mark:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
      }
      .fx2-sigil:before {
        border: 2px solid var(--c, #9cecff);
        box-shadow:
          0 0 8px #fff,
          inset 0 0 12px var(--c, #9cecff),
          0 0 18px var(--c, #9cecff);
        animation: fx2Ring 1.75s ease-out forwards;
      }
      .fx2-sigil:after {
        inset: 20%;
        background: conic-gradient(
          from 0deg,
          transparent,
          var(--c, #9cecff),
          transparent 28%,
          var(--c, #9cecff),
          transparent 62%
        );
        filter: blur(1px);
        animation: motion-spin 1.1s linear 2;
      }
      
      
      
      
      
      
      .fx2-dragon {
        --c: #41e39b;
        background: conic-gradient(
          from 30deg,
          transparent 0 16%,
          #75ffc3 17% 25%,
          transparent 26% 53%,
          #20a873 54% 66%,
          transparent 67%
        );
        animation: fx2Coil 2s ease-out forwards;
      }
      .fx2-phoenix {
        --c: #ff7533;
        background: radial-gradient(
          ellipse at 50% 65%,
          #fff5a6 0 8%,
          #ff9c36 18%,
          #ef3925 38%,
          transparent 62%
        );
        clip-path: polygon(
          50% 0,
          62% 33%,
          95% 15%,
          75% 53%,
          100% 63%,
          65% 69%,
          50% 100%,
          35% 69%,
          0 63%,
          25% 53%,
          5% 15%,
          38% 33%
        );
        animation: fx2Wing 2.1s ease-out forwards;
      }
      .fx2-curse {
        --c: #ee73cf;
        background:
          radial-gradient(circle at 28% 65%, #ffb7e8 0 12%, transparent 14%),
          radial-gradient(circle at 67% 32%, #d66bce 0 15%, transparent 17%),
          radial-gradient(circle at 62% 76%, #913ca8 0 10%, transparent 12%);
        filter: drop-shadow(0 0 8px #f78add);
        animation: fx2Puff 1.9s ease-out forwards;
      }

      .fx2-resurrect {
        --c: #ff455a;
        background: radial-gradient(
          circle,
          #fff 0 5%,
          #ff9ca9 7% 16%,
          transparent 18%
        );
      }

      .fx2-resurrect:after {
        left: 42%;
        right: 42%;
        inset-block: -25%;
        border-radius: 30%;
        background: linear-gradient(
          transparent,
          #ff6b7daa,
          #fff,
          #ff6b7daa,
          transparent
        );
        filter: blur(2px);
        animation: fx2Column 2s ease-out forwards;
      }
      .fx2-tomb {
        --c: #9168d4;
        background: radial-gradient(
          ellipse at 50% 85%,
          #1d1727 0 20%,
          #4c376d 33%,
          transparent 62%
        );
        animation: fx2Rise 2.1s ease-out forwards;
      }
      .fx2-cannon {
        --c: #ff8b38;
        background: radial-gradient(
          circle,
          #fff2b0 0 7%,
          #ff9b3d 13%,
          #902a18 32%,
          transparent 48%
        );
        animation: fx2Recoil 1.65s ease-out forwards;
      }
      .fx2-flight {
        --c: #48e2b0;
        background: linear-gradient(
          135deg,
          transparent 24%,
          #baffea 27% 33%,
          #2dc995 34% 43%,
          transparent 46%
        );
        filter: drop-shadow(0 0 8px #4cffc1);
        animation: fx2Dash 1.7s ease-out forwards;
      }
      .fx2-fusion {
        --c: #f4c64d;
        background:
          radial-gradient(
            circle at 36% 50%,
            transparent 0 18%,
            #ffd968 20% 25%,
            transparent 27%
          ),
          radial-gradient(
            circle at 64% 50%,
            transparent 0 18%,
            #fff0a1 20% 25%,
            transparent 27%
          );
        animation: fx2Fuse 1.9s ease-out forwards;
      }
      .fx2-paradox {
        --c: #aa70ed;
        background: conic-gradient(
          from 90deg,
          #c99cff,
          transparent 22% 50%,
          #6b37b5 52%,
          transparent 75%
        );
        animation: fx2Paradox 2s ease-in-out forwards;
      }
      .fx2-coil,
      .fx2-em-charge {
        --c: #42e9ff;
        background: repeating-conic-gradient(
          from 10deg,
          transparent 0 16deg,
          #d9ffff 18deg 20deg,
          transparent 22deg 45deg
        );
        filter: drop-shadow(0 0 6px #36dcff);
        animation: fx2Electric 1.55s steps(3) forwards;
      }

      .fx2-shadow-trail {
        --c: #7668aa;
        background: radial-gradient(ellipse, #7668aa99, transparent 66%);
        filter: blur(3px);
        animation: fx2Shadow 1.6s ease-out forwards;
      }

      .fx2-thousand {
        --c: #4de5bd;
        background: linear-gradient(
          90deg,
          transparent,
          #b8ffe9,
          #20b58f,
          transparent
        );
        height: 4%;
        aspect-ratio: auto;
        border-radius: 999px;
        animation: fx2Speed 1.4s ease-out forwards;
      }
      .fx2-chain {
        --c: #ff7b45;
        background:
          radial-gradient(
            circle at 35% 50%,
            transparent 0 18%,
            #ff9d66 20% 25%,
            transparent 27%
          ),
          radial-gradient(
            circle at 65% 50%,
            transparent 0 18%,
            #ff603c 20% 25%,
            transparent 27%
          );
        animation: fx2Fuse 1.5s ease-out forwards;
      }
      .fx2-rail {
        --c: #65e8ff;
        background: linear-gradient(
          90deg,
          transparent,
          #d9ffff 35% 65%,
          transparent
        );
        height: 3%;
        aspect-ratio: auto;
        box-shadow: 0 0 10px #45dfff;
        animation: fx2Speed 1.4s ease-out forwards;
      }
      .fx2-wanli {
        --c: #f2c14d;
        background: repeating-linear-gradient(
          135deg,
          transparent 0 8px,
          #ffe99a 9px 12px,
          transparent 13px 19px
        );
        animation: fx2Dash 1.5s ease-out forwards;
      }
      .fx2-pursuit {
        --c: #ff5342;
        background: conic-gradient(
          from 45deg,
          transparent 0 70%,
          #ffad70 72% 77%,
          transparent 79%
        );
        animation: fx2SpinOut 1.5s ease-out forwards;
      }
      
      
      .fx2-claw-row {
        position: absolute;
        left: 4%;
        width: 92%;
        height: 10%;
        transform: translateY(-50%);
        z-index: 12;
        pointer-events: none;
        filter: drop-shadow(0 0 6px #d62f55);
        animation: fx2Row 1.9s ease-out forwards;
      }
      .fx2-claw-row i {
        position: absolute;
        top: 10%;
        height: 80%;
        width: 2px;
        background: linear-gradient(transparent, #ffd2dc, #e31e50, transparent);
        transform: skewX(-28deg) rotate(8deg);
      }
      .fx2-claw-row i:nth-child(1) {
        left: 38%;
      }
      .fx2-claw-row i:nth-child(2) {
        left: 50%;
      }
      .fx2-claw-row i:nth-child(3) {
        left: 62%;
      }
      .fx2-mirror {
        background: linear-gradient(
          var(--axis),
          transparent 0 45%,
          #d9fbff66 48%,
          #fff 50%,
          #9cecff77 52%,
          transparent 55%
        );
        animation: fx2Mirror 2s ease-out forwards;
      }
      .fx2-mirror:after {
        content: "";
        position: absolute;
        inset: 12%;
        background: conic-gradient(
          from 20deg at 50% 50%,
          transparent 0 8%,
          #dffcff22 9% 12%,
          transparent 13% 25%,
          #fff5 26% 28%,
          transparent 29%
        );
        clip-path: polygon(
          50% 0,
          57% 38%,
          100% 22%,
          65% 50%,
          100% 80%,
          57% 62%,
          50% 100%,
          43% 62%,
          0 80%,
          35% 50%,
          0 22%,
          43% 38%
        );
      }
      .fx2-gift i {
        position: absolute;
        left: 7%;
        top: 44%;
        width: 7%;
        aspect-ratio: 1;
        border-radius: 10%;
        background: linear-gradient(135deg, #e94e68, #a91f42);
        box-shadow:
          inset 0 0 0 2px #ff8ba0,
          0 0 12px #ff6b88;
        animation: fx2Gift 2.2s ease-in-out forwards;
      }
      .fx2-gift i:before {
        content: "";
        position: absolute;
        left: 42%;
        top: -8%;
        width: 16%;
        height: 116%;
        background: #ffd36a;
      }
      .fx2-gift i:after {
        content: "";
        position: absolute;
        left: -8%;
        top: 42%;
        width: 116%;
        height: 16%;
        background: #ffd36a;
      }
      .fx2-gift.reverse i {
        animation-direction: reverse;
      }
      .fx2-cavalry {
        background: linear-gradient(0deg, #4b2a1222, transparent 58%);
        animation: fx2Fade 2.25s ease-out forwards;
      }
      .fx2-cavalry i {
        position: absolute;
        left: calc(-12% - var(--n) * 13%);
        bottom: 18%;
        color: #3b2419;
        font: clamp(28px, 6vw, 67px) serif;
        text-shadow:
          0 3px #110904,
          0 0 8px #e6aa61;
        animation: fx2Horse 2s ease-in-out calc(var(--n) * 0.08s) forwards;
      }
      .fx2-cavalry i:after {
        content: "♞";
      }
      
      
      
      
      
      
      
      .fx2-error {
        background: repeating-linear-gradient(
          0deg,
          transparent 0 8px,
          #b987aa0d 9px 11px,
          transparent 12px 17px
        );
        animation: fx2Error 2.1s steps(3) forwards;
      }
      .fx2-error i {
        position: absolute;
        width: 28%;
        height: 3%;
        left: var(--x);
        top: var(--y);
        background: linear-gradient(
          90deg,
          transparent,
          #bc95ab88,
          #9ccbc288,
          transparent
        );
        box-shadow:
          2px 0 #9ccbc233,
          -2px 0 #bc95ab33;
        animation: fx2Noise 0.7s ease-in-out 3;
      }
      .fx2-flood {
        background: linear-gradient(
          0deg,
          #337f9638 0 25%,
          #89c6cf33 36%,
          transparent 58%
        );
        animation: fx2Flood 2.25s ease-out forwards;
      }
      .fx2-flood:after {
        content: "";
        position: absolute;
        left: -15%;
        right: -15%;
        top: 42%;
        height: 18%;
        border-radius: 50%;
        border-top: 3px solid #d8fbff66;
        animation: fx2Wave 1.1s ease-in-out 2;
      }
      .fx2-dream {
        background:
          radial-gradient(circle at 30% 40%, #e9dcff77, transparent 22%),
          radial-gradient(circle at 68% 60%, #8feaff55, transparent 25%),
          radial-gradient(circle, #9c78cb44, transparent 62%);
        animation: fx2Dream 2.7s ease-in-out forwards;
      }
      .fx2-dream:after {
        content: "";
        position: absolute;
        inset: 16%;
        border-radius: 50%;
        background: conic-gradient(
          transparent,
          #fff4,
          transparent,
          #c7a5ff44,
          transparent
        );
        animation: motion-spin 2.2s linear 1;
      }
      .fx2-reversal {
        background: radial-gradient(
          circle,
          transparent 0 28%,
          #ffca5a44 32%,
          #f42e8d33 40%,
          #52e5ff33 48%,
          transparent 57%
        );
        animation: fx2Reverse 2.25s ease-out forwards;
      }
      .fx2-reversal:after {
        content: "";
        position: absolute;
        inset: 20%;
        border: 2px dashed #fff8;
        border-radius: 50%;
        animation: motion-spin 1.2s linear 2;
      }
      .fx2-solar {
        --c: #ffd84f;
        background: repeating-conic-gradient(
          #fff6a3 0 5deg,
          transparent 6deg 18deg
        );
        animation: fx2SpinOut 1.7s ease-out forwards;
      }

      .fx2-spirit {
        --c: #74f0d7;
        background: radial-gradient(
          ellipse at 50% 70%,
          #cffff4cc,
          #58cfb966 30%,
          transparent 62%
        );
        filter: blur(1px);
        animation: fx2Rise 1.8s ease-out forwards;
      }
      .fx2-shadow {
        --c: #75699d;
        background: radial-gradient(ellipse, #5b507c99, transparent 65%);
        filter: blur(3px);
        animation: fx2Shadow 1.6s ease-out forwards;
      }
      .fx2-guardian {
        --c: #5ee8ff;
        background: linear-gradient(90deg, transparent, #b8fbff99, transparent);
        animation: fx2Shield 1.8s ease-out forwards;
      }
      .fx2-tree {
        --c: #68b85e;
        background:
          radial-gradient(circle at 35% 35%, #b4e073 0 15%, transparent 17%),
          radial-gradient(circle at 65% 38%, #5fac55 0 20%, transparent 22%),
          linear-gradient(
            90deg,
            transparent 45%,
            #684422 46% 54%,
            transparent 55%
          );
        animation: fx2Grow 1.8s ease-out forwards;
      }
      .fx2-transform {
        --c: #b98cff;
        background: conic-gradient(
          transparent,
          #d7b8ff,
          transparent,
          #76eaff,
          transparent
        );
        animation: fx2Paradox 1.7s ease-out forwards;
      }

      @keyframes fx2Ring {
        0% {
          opacity: 0;
          transform: scale(0.2) rotate(-30deg);
        }
        35%,
        70% {
          opacity: 1;
          transform: scale(1.05) rotate(8deg);
        }
        100% {
          opacity: 0;
          transform: scale(1.7) rotate(35deg);
        }
      }
      
      
      
      @keyframes fx2Coil {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(-140deg);
        }
        40%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.7) rotate(100deg);
        }
      }
      @keyframes fx2Wing {
        0% {
          opacity: 0;
          transform: translate(-50%, -40%) scale(0.2);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -65%) scale(1.25);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -110%) scale(1.65);
        }
      }
      @keyframes fx2Puff {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        35%,
        65% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -90%) scale(1.8);
          filter: blur(8px);
        }
      }

      @keyframes fx2Column {
        0% {
          opacity: 0;
          transform: scaleY(0.1);
        }
        35%,
        70% {
          opacity: 1;
          transform: scaleY(1);
        }
        100% {
          opacity: 0;
          transform: scaleY(1.4);
        }
      }
      @keyframes fx2Rise {
        0% {
          opacity: 0;
          transform: translate(-50%, -20%) scale(0.4);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -55%) scale(1.15);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -100%) scale(1.4);
        }
      }
      @keyframes fx2Recoil {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        28% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.4);
        }
        45% {
          transform: translate(-50%, -50%) scale(0.85);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.6);
        }
      }
      @keyframes fx2Dash {
        0% {
          opacity: 0;
          transform: translate(-80%, -50%) scale(0.4);
        }
        35%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2);
        }
        100% {
          opacity: 0;
          transform: translate(10%, -50%) scale(1.7);
        }
      }
      @keyframes fx2Fuse {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2);
        }
        40%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1);
        }
      }
      @keyframes fx2Paradox {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.4) rotate(0);
        }
        45%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.6) rotate(360deg);
        }
      }
      @keyframes fx2Electric {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.4) rotate(0);
        }
        20%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2) rotate(90deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.8) rotate(160deg);
        }
      }

      @keyframes fx2Shield {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        32%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.15);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.8);
        }
      }

      @keyframes fx2Shadow {
        0% {
          opacity: 0;
          transform: translate(-70%, -50%) scale(0.5);
        }
        35%,
        65% {
          opacity: 0.8;
          transform: translate(-50%, -50%) scale(1.1);
        }
        100% {
          opacity: 0;
          transform: translate(-20%, -50%) scale(1.5);
        }
      }

      @keyframes fx2Speed {
        0% {
          opacity: 0;
          transform: translate(-110%, -50%) scaleX(0.2);
        }
        30%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scaleX(1.2);
        }
        100% {
          opacity: 0;
          transform: translate(25%, -50%) scaleX(1.8);
        }
      }
      @keyframes fx2SpinOut {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(-90deg);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2) rotate(20deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.8) rotate(160deg);
        }
      }
      
      @keyframes fx2Row {
        0% {
          opacity: 0;
          transform: translateY(-50%) scaleX(0.15);
        }
        35%,
        72% {
          opacity: 1;
          transform: translateY(-50%) scaleX(1);
        }
        100% {
          opacity: 0;
          transform: translateY(-50%) scaleX(1.08);
        }
      }
      @keyframes fx2Mirror {
        0% {
          opacity: 0;
          transform: scaleX(0.08);
        }
        42%,
        72% {
          opacity: 1;
          transform: scaleX(1);
        }
        100% {
          opacity: 0;
          transform: scaleX(1.15);
        }
      }
      @keyframes fx2Gift {
        0% {
          opacity: 0;
          left: 5%;
          transform: translateY(25%) rotate(-18deg) scale(0.5);
        }
        20%,
        80% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          left: 88%;
          transform: translateY(-18%) rotate(20deg) scale(1.1);
        }
      }
      @keyframes fx2Fade {
        0% {
          opacity: 0;
        }
        25%,
        72% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx2Horse {
        0% {
          opacity: 0;
          left: -15%;
          transform: translateY(10%) rotate(-8deg);
        }
        20% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          left: 112%;
          transform: translateY(-8%) rotate(5deg);
        }
      }
      
      
      
      @keyframes fx2Error {
        0% {
          opacity: 0;
          transform: translateX(-4%);
        }
        25%,
        72% {
          opacity: 1;
          transform: translateX(2%);
        }
        100% {
          opacity: 0;
          transform: translateX(-2%);
        }
      }
      @keyframes fx2Noise {
        50% {
          transform: translate(12px, -5px) scaleX(0.7);
        }
      }
      @keyframes fx2Flood {
        0% {
          opacity: 0;
          transform: translateY(45%);
        }
        38%,
        75% {
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          transform: translateY(-10%);
        }
      }
      @keyframes fx2Wave {
        50% {
          transform: translateX(8%) scaleY(1.3);
        }
      }
      @keyframes fx2Dream {
        0% {
          opacity: 0;
          transform: scale(0.6);
          filter: blur(14px);
        }
        40%,
        72% {
          opacity: 1;
          transform: scale(1.1);
          filter: blur(3px);
        }
        100% {
          opacity: 0;
          transform: scale(1.35);
          filter: blur(18px);
        }
      }
      @keyframes fx2Reverse {
        0% {
          opacity: 0;
          transform: scale(0.15) rotate(-40deg);
        }
        40%,
        72% {
          opacity: 1;
          transform: scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: scale(1.5) rotate(80deg);
        }
      }

      @keyframes fx2Grow {
        0% {
          opacity: 0;
          transform: translate(-50%, -20%) scaleY(0.1);
        }
        42%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -65%) scale(1.3);
        }
      }
      .fx-new-skill {
        width: 13%;
        aspect-ratio: 1;
        border: 2px solid #8fe8cf;
        border-radius: 50%;
        box-shadow:
          inset 0 0 12px #8fe8cf66,
          0 0 12px #8fe8cf66;
        animation: newSkillPulse 1.3s ease-out forwards;
      }
      .fx-new-skill:before,
      .fx-new-skill:after {
        content: "";
        position: absolute;
        inset: 15%;
        border: 1px dashed currentColor;
        border-radius: 30%;
        transform: rotate(45deg);
      }
      .fx-new-skill:after {
        inset: 32%;
        background: currentColor;
        opacity: 0.45;
      }
      .fx-new-skill.diagonal {
        color: #edbd79;
        border-color: #edbd79;
      }
      .fx-new-skill.stride {
        color: #9dd9ff;
      }
      .fx-new-skill.escape,
      .fx-new-skill.exchange {
        color: #c4a0ff;
        border-style: dashed;
      }
      .fx-new-skill.silence {
        color: #9ebaff;
        border-color: #9ebaff;
        border-radius: 10%;
      }
      .fx-new-skill.reinforce {
        color: #efb478;
      }
      .fx-new-skill.cleanse {
        color: #9dffce;
      }
      @keyframes newSkillPulse {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.25) rotate(-45deg);
        }
        30% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.7) rotate(45deg);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .fx-new-skill {
          animation-duration: 0.2s;
        }
      }

.fx-saint-zone {
  position: absolute;
  width: 33.75%;
  height: 30%;
  transform: translate(-50%, -50%);
  border: 1px solid #d6bc794d;
  border-radius: 14%;
  background: radial-gradient(ellipse, #dec67a0b, transparent 75%);
  pointer-events: none;
  z-index: 1;
}
.fx-taunt {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px dashed #d88d6ba6;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.fx-taunt-2 {
  border-color: #d95f54;
  border-style: solid;
}

.novel-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        overflow: hidden;
      }
      .novel-overlay text {
        font:
          2.1px Microsoft YaHei,
          sans-serif;
        text-anchor: middle;
        fill: #fff2d6;
        stroke: #241219;
        stroke-width: 0.12;
        paint-order: stroke;
        dominant-baseline: auto;
      }
      .novel-fate-line {
        stroke: #cf466a;
        stroke-width: 0.5;
        stroke-dasharray: 1.8 1;
        opacity: 0.85;
      }
      .novel-marker circle {
        fill: #251c35aa;
        stroke: #bd9de4;
        stroke-width: 0.45;
        stroke-dasharray: 1.4 0.5;
      }
      .novel-marker.mine circle {
        fill: #733b1966;
        stroke: #d46b25;
      }
      .novel-marker.life circle {
        fill: #3a502344;
        stroke: #a5d678;
        stroke-dasharray: none;
      }
      .novel-wheel rect {
        fill: #b38e2822;
        stroke: #91652f;
        stroke-width: 0.5;
        stroke-dasharray: 2 0.7;
      }
      .novel-wheel text {
        fill: #6b3b21;
        stroke: #ffe6af55;
        font-size: 3px;
      }
      .novel-meteor rect {
        fill: #ae263c38;
        stroke: #b91b38;
        stroke-width: 0.5;
        stroke-dasharray: 1.5 0.7;
      }
      .novel-meteor line {
        stroke: #e94b55;
        stroke-width: 0.7;
      }
      .novel-meteor text {
        fill: #ffe6b7;
        stroke: #7c182d;
        font-size: 2.7px;
      }
      .novel-status {
        padding: 7px 10px;
        margin-bottom: 8px;
        background: #3a2542;
        border: 1px solid #9e75ba77;
        border-radius: 8px;
        color: #ecd5ff;
        font-size: 12px;
      }
      .piece.paper-piece {
        border-style: dashed;
        border-radius: 18% 50% 25% 50%;
        background: repeating-linear-gradient(
          15deg,
          #f3e8ce 0 7px,
          #dfd2b6 8px 9px
        );
        opacity: 0.84;
      }
      .novel-burst {
        width: 14%;
        aspect-ratio: 1;
        border: 2px solid #f0b778;
        border-radius: 50%;
        box-shadow: inset 0 0 15px #ffad6c55;
        animation: novelBurst 1.3s ease-out forwards;
        color: #f4bf76;
      }
      .novel-burst > i {
        position: absolute;
        width: 13%;
        height: 13%;
        background: currentColor;
        left: 43%;
        top: 43%;
        transform: translate(-220%, -200%) rotate(30deg);
      }
      .novel-burst > i:nth-child(2) {
        transform: translate(220%, -150%) rotate(70deg);
      }
      .novel-burst > i:nth-child(3) {
        transform: translate(-180%, 190%) rotate(20deg);
      }
      .novel-burst > i:nth-child(4) {
        transform: translate(210%, 200%) rotate(60deg);
      }
      .novel-burst.paperFold,
      .novel-burst.paperBreak {
        border-style: dashed;
        border-radius: 10%;
        color: #fff2cf;
      }
      .novel-burst.fateTie,
      .novel-burst.fateBreak {
        border-color: #e95b82;
        color: #e95b82;
      }
      .novel-burst.echoMark,
      .novel-burst.echoReturn,
      .novel-burst.pocketTake,
      .novel-burst.pocketReturn {
        border-color: #b597ff;
        color: #b597ff;
      }
      .novel-burst.lifeSave,
      .novel-burst.lifeLight {
        border-color: #b2f1a1;
        color: #b2f1a1;
      }
      .novel-burst.wheelTurn {
        border: 4px dotted #bd914d;
        animation: novelWheel 1.2s ease-out forwards;
      }
      .novel-burst.meteorImpact,
      .novel-burst.mineBlast {
        border-color: #ff835d;
        background: radial-gradient(circle, #fff7c0aa, transparent 67%);
        color: #ffb46f;
        animation: novelImpact 1.4s ease-out forwards;
      }
      .novel-burst.meteorCall:before {
        content: "";
        position: absolute;
        width: 5%;
        height: 160%;
        left: 45%;
        bottom: 50%;
        background: linear-gradient(transparent, #ffd1a3);
        transform: rotate(28deg);
      }
      .novel-wave {
        inset: 12%;
        border: 3px dashed #b99ae5;
        border-radius: 50%;
        background: radial-gradient(
          ellipse,
          transparent 40%,
          #ad87e533 65%,
          transparent 70%
        );
        animation: novelImpact 1.5s ease-out forwards;
      }
      @keyframes novelBurst {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(-25deg);
        }
        25% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.8) rotate(80deg);
        }
      }
      @keyframes novelWheel {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(0);
        }
        30% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(90deg);
        }
      }
      @keyframes novelImpact {
        0% {
          opacity: 0;
          scale: 0.2;
        }
        25% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          scale: 2;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .novel-burst,
        .novel-wave {
          animation-duration: 0.2s;
        }
      }

      
.skill-action-banner {
        position: sticky;
        top: 8px;
        z-index: 17;
        max-width: 860px;
        margin: 0 0 12px;
        padding: 12px 15px;
        border: 1px solid #e7bd7188;
        border-left: 4px solid #e7bd71;
        border-radius: 12px;
        background: #201a15;
        box-shadow: 0 5px 18px #0005;
        color: #f5e6cc;
      }
      .skill-action-heading {
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
      }
      .skill-action-heading strong {
        font-size: 19px;
        color: #ffe2a7;
      }
      .skill-action-label {
        font-size: 12px;
        color: #d6c4aa;
      }
      .skill-action-progress {
        padding: 2px 8px;
        border-radius: 999px;
        background: #e7bd711a;
        color: #f4d79f;
        font-size: 12px;
      }
      .skill-action-heading > .btn {
        margin-left: auto;
        padding: 5px 9px;
        font-size: 12px;
      }
      .skill-action-next {
        margin: 7px 0 0;
        font-size: 14px;
        line-height: 1.6;
      }
      .skill-action-chosen {
        margin: 5px 0 0;
        font-size: 12px;
        color: #d0d5b5;
        overflow-wrap: anywhere;
      }
      .skill-action-details {
        margin-top: 6px;
        font-size: 12px;
        color: #c6bcac;
      }
      .skill-action-details summary {
        cursor: pointer;
        width: fit-content;
      }
      .skill-action-details p {
        margin: 6px 0 0;
        line-height: 1.6;
      }
      body[data-theme="blue"] .skill-action-banner {
        background: #152536;
        border-color: #88c7e5;
      }
      body[data-theme="violet"] .skill-action-banner {
        background: #2c1d35;
        border-color: #cc9de4;
      }
      body[data-theme="gold"] .skill-action-banner {
        background: #2d2518;
        border-color: #e6c17f;
      }
      @media (max-width: 650px) {
        .skill-action-banner {
          top: 4px;
          padding: 9px 11px;
          max-height: 42vh;
          overflow-y: auto;
        }
        .skill-action-heading {
          gap: 6px;
        }
        .skill-action-heading strong {
          font-size: 17px;
        }
        .skill-action-next {
          font-size: 13px;
        }
      }
      
/* v47: skill-specific vector choreography. Local geometry, no screen-sized blur. */
      .fx47 {
        width: 100%;
        height: 100%;
        z-index: 9;
        pointer-events: none;
        overflow: hidden;
        animation: fx47Scene 2.8s linear both;
        animation-delay: var(--chain-delay, 0s);
        contain: layout paint;
      }
      .fx47 .fx47-thread-shadow {
        fill: none;
        stroke: #291e2c;
        stroke-width: 0.85;
        opacity: 0.4;
      }
      .fx47 .fx47-thread {
        fill: none;
        stroke: var(--ribbon, #c4a5db);
        stroke-width: 0.38;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: motion-trace 1s ease-out both;
      }
      .fx47 .fx47-travel {
        fill: none;
        stroke: #fff0ce;
        stroke-width: 0.16;
        stroke-dasharray: 3 12;
        animation: fx47Flow 1.5s linear both;
      }
      .fx47 .paper-route {
        opacity: 0.4;
      }
      .fx47 .paper-cut .fx47-thread {
        stroke-width: 0.5;
        animation-duration: 0.28s;
      }
      .fx47 .fx47-knot {
        fill: none;
        stroke: #e7a0ad;
        stroke-width: 0.4;
        animation: fx47Knot 0.75s ease-out both;
        transform-box: fill-box;
        transform-origin: center;
      }
      .fx47 .fx47-fate-break {
        fill: none;
        stroke: #d98198;
        stroke-width: 0.45;
      }
      .fx47 .fx47-snap-left {
        animation: fx47SnapLeft 0.7s ease-out both;
      }
      .fx47 .fx47-snap-right {
        animation: fx47SnapRight 0.7s ease-out both;
      }
      .fx47 .fx47-particle {
        opacity: 0;
        animation: fx47Particle 1.35s cubic-bezier(0.14, 0.66, 0.28, 1) both;
        animation-delay: calc(var(--delay, 0s) + var(--chain-delay, 0s));
      }
      .fx47 .fx47-paper-flight {
        animation: fx47PaperFlight 1.55s cubic-bezier(0.25, 0.7, 0.2, 1) both;
      }
      .fx47 .fx47-paper-fracture {
        animation: fx47PaperFracture 0.75s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-wheel {
        transform-origin: 0 0;
      }
      .fx47 .fx47-wheel.turn {
        animation: fx47WheelTurn 1s cubic-bezier(0.22, 0.65, 0.14, 1) both;
      }
      .fx47 .fx47-wheel.build {
        animation: fx47WheelBuild 0.9s ease-out both;
      }
      .fx47 .fx47-lantern-rise {
        animation: fx47LanternRise 1.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-flame {
        animation: fx47Flame 0.55s ease-in-out 3 alternate;
        transform-box: fill-box;
        transform-origin: center bottom;
      }
      .fx47 .fx47-pouch {
        animation: fx47Pouch 1.6s ease-in-out both;
        transform-origin: 0 2px;
      }
      .fx47 .fx47-pocket-unit.take {
        animation: fx47PocketTake 1.3s ease-in both;
      }
      .fx47 .fx47-pocket-unit.release {
        animation: fx47PocketReturn 1.5s ease-out both;
      }
      .fx47 .fx47-pocket-wind {
        animation: fx47Wind 1.6s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-clock {
        fill: none;
        stroke: #c9dde1;
        stroke-width: 0.3;
        animation: fx47Clock 1.8s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-clock .fx47-dim {
        opacity: 0.3;
      }
      .fx47 .fx47-clock-hand {
        stroke: #fbebba;
        animation: fx47ClockHand 1.5s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-clock.reverse .fx47-clock-hand {
        animation-direction: reverse;
      }
      .fx47 .fx47-time-ghost {
        opacity: 0;
        animation: fx47Ghost 1.25s ease-out both;
        animation-delay: var(--delay, 0s);
      }
      .fx47 .fx47-card-flight.to-right {
        animation: fx47CardRight 1.7s cubic-bezier(0.3, 0.5, 0.18, 1) both;
      }
      .fx47 .fx47-card-flight.to-left {
        animation: fx47CardLeft 1.7s cubic-bezier(0.3, 0.5, 0.18, 1) both;
      }
      .fx47 .fx47-mine-arm {
        animation: fx47MineArm 1s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-crossfire {
        animation: fx47Crossfire 1.15s ease-out both;
        animation-delay: var(--chain-delay, 0s);
        transform-origin: 0 0;
      }
      .fx47 .fx47-scorch {
        opacity: 0;
        animation: fx47Scorch 1.8s ease-out 0.18s both;
      }
      .fx47 .fx47-equal-sweep {
        animation: fx47EqualSweep 1.7s cubic-bezier(0.25, 0.4, 0.2, 1) both;
      }
      .fx47 .fx47-equal-seal {
        opacity: 0;
        animation: fx47EqualSeal 1.2s ease-in-out both;
        animation-delay: var(--delay, 0s);
        transform-origin: 0 0;
      }
      .fx47 .fx47-target-in {
        animation: fx47Target 0.8s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-meteor-fall {
        animation: fx47MeteorFall 0.75s cubic-bezier(0.6, 0.05, 0.9, 0.5) both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-impact-plume {
        opacity: 0;
        animation: fx47Impact 1.3s ease-out 0.43s both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-crater {
        opacity: 0;
        animation: fx47Scorch 2s ease-out 0.58s both;
      }
      .fx47-meteorImpact .fx47-particle {
        animation-delay: calc(var(--delay, 0s) + 0.52s);
      }
      .fx47 .fx47-dragon {
        animation: fx47Dragon 2s cubic-bezier(0.2, 0.65, 0.2, 1) both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-dragon-body {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: motion-trace 1.3s ease-out both;
      }
      .fx47 .fx47-phoenix {
        animation: fx47Phoenix 2.2s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-wing.left {
        animation: fx47WingLeft 0.7s ease-in-out 3 alternate;
        transform-origin: 0 -2px;
      }
      .fx47 .fx47-wing.right {
        animation: fx47WingRight 0.7s ease-in-out 3 alternate;
        transform-origin: 0 -2px;
      }
      .fx47 .fx47-tomb-rise {
        animation: fx47Tomb 1.9s ease-out both;
        transform-origin: 0 6px;
      }
      .fx47 .fx47-wisp {
        animation: fx47Wisp 2.1s ease-out both;
        transform-origin: 0 0;
      }
      .fx47 .fx47-shadow-copy {
        animation: fx47Shadow 1.4s ease-out both;
        animation-delay: var(--delay, 0s);
        transform-origin: 0 0;
      }

      @keyframes fx47Scene {
        0%,
        88% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      
      @keyframes fx47Flow {
        0% {
          stroke-dashoffset: 100;
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        100% {
          stroke-dashoffset: -10;
          opacity: 0;
        }
      }
      @keyframes fx47Knot {
        0% {
          transform: scale(0.2) rotate(-25deg);
          opacity: 0;
        }
        60% {
          transform: scale(1.2) rotate(5deg);
          opacity: 1;
        }
        100% {
          transform: scale(1) rotate(0);
        }
      }
      @keyframes fx47SnapLeft {
        0% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          transform: translate(-4px, 3px);
        }
      }
      @keyframes fx47SnapRight {
        0% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          transform: translate(4px, 3px);
        }
      }
      @keyframes fx47Particle {
        0% {
          opacity: 0;
          transform: translate(0, 0) scale(0.3);
        }
        15% {
          opacity: 1;
        }
        75% {
          opacity: 0.75;
        }
        100% {
          opacity: 0;
          transform: translate(var(--dx), var(--dy)) rotate(var(--spin))
            scale(0.35);
        }
      }
      @keyframes fx47PaperFlight {
        0% {
          transform: translate(0, 0) rotate(-35deg) scale(0.15);
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        70% {
          opacity: 1;
          transform: translate(var(--dx), var(--dy)) rotate(8deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(var(--dx), var(--dy)) rotate(0) scale(0.9);
        }
      }
      @keyframes fx47PaperFracture {
        0% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(2) rotate(25deg);
        }
      }
      @keyframes fx47WheelTurn {
        0% {
          transform: rotate(0) scale(0.96);
        }
        20% {
          opacity: 1;
        }
        85% {
          transform: rotate(92deg) scale(1.03);
        }
        100% {
          transform: rotate(90deg) scale(1);
          opacity: 0.35;
        }
      }
      @keyframes fx47WheelBuild {
        0% {
          opacity: 0;
          transform: scale(1.4) rotate(-20deg);
        }
        100% {
          opacity: 0.8;
          transform: scale(1) rotate(0);
        }
      }
      @keyframes fx47LanternRise {
        0% {
          opacity: 0;
          transform: translate(0, 4px) scale(0.6);
        }
        25% {
          opacity: 1;
        }
        70% {
          opacity: 1;
          transform: translate(0, -2px);
        }
        100% {
          opacity: 0;
          transform: translate(0, -6px);
        }
      }
      @keyframes fx47Flame {
        from {
          transform: scale(0.85, 1.1) rotate(-5deg);
        }
        to {
          transform: scale(1.1, 0.9) rotate(5deg);
        }
      }
      @keyframes fx47Pouch {
        0% {
          opacity: 0;
          transform: scale(0.5);
        }
        25%,
        75% {
          opacity: 1;
          transform: scale(1.05);
        }
        100% {
          opacity: 0;
          transform: scale(0.75);
        }
      }
      @keyframes fx47PocketTake {
        0% {
          opacity: 0;
          transform: translate(0, -12px) scale(1.2);
        }
        20% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(0, -2px) rotate(170deg) scale(0.05);
        }
      }
      @keyframes fx47PocketReturn {
        0% {
          opacity: 0;
          transform: translate(0, -2px) scale(0.1);
        }
        25% {
          opacity: 1;
        }
        85% {
          opacity: 1;
          transform: translate(0, -10px) scale(1.3);
        }
        100% {
          opacity: 0;
          transform: translate(0, -13px) scale(1);
        }
      }
      @keyframes fx47Wind {
        0% {
          opacity: 0;
          transform: scale(1.3) rotate(-20deg);
        }
        30% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: scale(0.4) rotate(80deg);
        }
      }
      @keyframes fx47Clock {
        0% {
          opacity: 0;
          transform: scale(0.4);
        }
        25% {
          opacity: 1;
          transform: scale(1.1);
        }
        80% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }
      @keyframes fx47ClockHand {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(330deg);
        }
      }
      @keyframes fx47Ghost {
        0% {
          opacity: 0;
          transform: translate(0, 1px) scale(0.6);
        }
        35% {
          opacity: 0.6;
        }
        100% {
          opacity: 0;
          transform: translate(0, -2px) scale(1);
        }
      }
      @keyframes fx47CardRight {
        0% {
          opacity: 0;
          transform: translate(0, 0) rotate(-20deg);
        }
        20% {
          opacity: 1;
        }
        75% {
          opacity: 1;
          transform: translate(var(--card-dx, 56px), var(--card-dy, -30px))
            rotate(15deg);
        }
        100% {
          opacity: 0;
          transform: translate(var(--card-dx, 56px), var(--card-dy, -30px))
            rotate(0) scale(0.7);
        }
      }
      @keyframes fx47CardLeft {
        0% {
          opacity: 0;
          transform: translate(0, 0) rotate(20deg);
        }
        20% {
          opacity: 1;
        }
        75% {
          opacity: 1;
          transform: translate(var(--card-dx, -56px), var(--card-dy, -30px))
            rotate(-15deg);
        }
        100% {
          opacity: 0;
          transform: translate(var(--card-dx, -56px), var(--card-dy, -30px))
            rotate(0) scale(0.7);
        }
      }
      @keyframes fx47MineArm {
        0% {
          opacity: 0;
          transform: scale(0.4) translate(0, 3px);
        }
        50% {
          opacity: 1;
          transform: scale(1.15);
        }
        100% {
          opacity: 0.3;
          transform: scale(1);
        }
      }
      @keyframes fx47Crossfire {
        0% {
          opacity: 0;
          transform: scale(0.08);
        }
        20% {
          opacity: 1;
          transform: scale(0.65);
        }
        55% {
          opacity: 0.85;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.15);
        }
      }
      @keyframes fx47Scorch {
        0% {
          opacity: 0;
        }
        20%,
        75% {
          opacity: 0.7;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx47EqualSweep {
        0% {
          transform: translate(0, -10px);
          opacity: 0;
        }
        15%,
        75% {
          opacity: 1;
        }
        100% {
          transform: translate(0, 110px);
          opacity: 0;
        }
      }
      @keyframes fx47EqualSeal {
        0% {
          opacity: 0;
          transform: scale(0.2);
        }
        30% {
          opacity: 0.85;
          transform: scale(1.05);
        }
        70% {
          opacity: 0.6;
        }
        100% {
          opacity: 0;
          transform: scale(0.85);
        }
      }
      @keyframes fx47Target {
        0% {
          opacity: 0;
          transform: scale(1.5) rotate(-15deg);
        }
        100% {
          opacity: 1;
          transform: scale(1) rotate(0);
        }
      }
      @keyframes fx47MeteorFall {
        0% {
          opacity: 0;
          transform: translate(18px, -35px) scale(0.45);
        }
        10% {
          opacity: 1;
        }
        65% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-1px, 2px) scale(0.5);
        }
      }
      @keyframes fx47Impact {
        0% {
          opacity: 0;
          transform: scale(0.1);
        }
        20% {
          opacity: 1;
          transform: scale(0.8);
        }
        65% {
          opacity: 0.7;
          transform: scale(1.15);
        }
        100% {
          opacity: 0;
          transform: scale(1.35) translate(0, -4px);
        }
      }
      @keyframes fx47Dragon {
        0% {
          opacity: 0;
          transform: scale(0.4) translate(0, 12px) rotate(-20deg);
        }
        25% {
          opacity: 1;
        }
        75% {
          opacity: 1;
          transform: scale(1) translate(0, 0) rotate(0);
        }
        100% {
          opacity: 0;
          transform: scale(1.07) translate(0, -6px);
        }
      }
      @keyframes fx47Phoenix {
        0% {
          opacity: 0;
          transform: translate(0, 10px) scale(0.4);
        }
        25% {
          opacity: 1;
        }
        70% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(0, -8px) scale(1.1);
        }
      }
      @keyframes fx47WingLeft {
        from {
          transform: rotate(10deg) scaleY(0.7);
        }
        to {
          transform: rotate(-10deg) scaleY(1.1);
        }
      }
      @keyframes fx47WingRight {
        from {
          transform: rotate(-10deg) scaleY(0.7);
        }
        to {
          transform: rotate(10deg) scaleY(1.1);
        }
      }
      @keyframes fx47Tomb {
        0% {
          opacity: 0;
          transform: translate(0, 10px) scaleY(0.2);
        }
        40% {
          opacity: 1;
          transform: translate(0, -1px) scaleY(1.04);
        }
        75% {
          opacity: 1;
          transform: translate(0, 0) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(0, 0);
        }
      }
      @keyframes fx47Wisp {
        0% {
          opacity: 0;
          transform: translate(0, 5px) scale(0.4);
        }
        30%,
        70% {
          opacity: 0.85;
        }
        100% {
          opacity: 0;
          transform: translate(-3px, -8px) scale(1.1);
        }
      }
      @keyframes fx47Shadow {
        0% {
          opacity: 0;
          transform: scale(0.8, 0.15) translate(0, 5px);
        }
        30% {
          opacity: 0.65;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.2) translate(0, -2px);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .fx47 {
          animation: fx47Reduced 0.65s linear both !important;
        }
        .fx47 * {
          animation: none !important;
        }
        .fx47 .fx47-thread {
          stroke-dashoffset: 0;
        }
        .fx47 .fx47-particle,
        .fx47 .fx47-time-ghost,
        .fx47 .fx47-shadow-copy {
          display: none;
        }
        .fx47 .fx47-impact-plume,
        .fx47 .fx47-crater,
        .fx47 .fx47-equal-seal {
          opacity: 0.65;
        }
        @keyframes fx47Reduced {
          0%,
          65% {
            opacity: 0.65;
          }
          100% {
            opacity: 0;
          }
        }
      }
      
.board svg.fx-scene,
      .board svg.tech-overlay,
      .board svg.novel-overlay {
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .fx48-impact {
        opacity: 0;
        animation: fx48Hit 1.05s cubic-bezier(0.16, 0.7, 0.2, 1) both;
        animation-delay: var(--hit-delay, 0s);
        transform-origin: 0 0;
      }
      
      .fx48-persistent {
        overflow: hidden;
      }
      .fx48-persistent path {
        fill: none;
        stroke-width: 0.35;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .fx48-link path {
        stroke: #ac385d;
        stroke-width: 0.3;
        opacity: 0.65;
      }
      .fx48-link .novel-fate-line {
        stroke: #e78ca1;
        stroke-dasharray: 1.2 1;
        stroke-width: 0.45;
      }
      .fx48-persistent .fx48-knot {
        stroke: #8a234c;
        stroke-width: 0.55;
        paint-order: stroke;
        fill: none;
      }
      .fx48-wheel rect {
        fill: #af7e1b0d;
        stroke: #91652f;
        stroke-dasharray: none;
      }
      .fx48-wheel path {
        stroke: #825324;
        stroke-width: 0.45;
      }
      .fx48-wheel circle {
        fill: #e9cea2c9;
        stroke: #8e642d;
        stroke-width: 0.3;
      }
      .fx48-persistent text.fx48-count {
        font-size: 2px;
        fill: #422c34;
        stroke: #ffe8be;
        stroke-width: 0.16;
        paint-order: stroke;
      }
      .fx48-echo circle {
        fill: #d2e6eb55;
        stroke: #537a94;
        stroke-width: 0.3;
        stroke-dasharray: 1 0.6;
      }
      .fx48-echo path {
        stroke: #436982;
        stroke-width: 0.45;
      }
      .fx48-mine ellipse {
        fill: #704a3544;
        stroke: #6b4535;
      }
      .fx48-mine path {
        fill: #8b4839;
        stroke: #f4cb8f;
      }
      .fx48-mine path.fx48-fuse {
        fill: none;
        stroke: #b33d28;
        stroke-width: 0.45;
      }
      .fx48-lamp path {
        fill: #553b40;
        stroke: #f6d48c;
        stroke-width: 0.3;
      }
      .fx48-lamp .fx48-lamp-flame {
        fill: #ffe4a4;
        stroke: none;
      }
      .fx48-danger rect {
        fill: #a7304420;
        stroke: #963346;
        stroke-width: 0.3;
        stroke-dasharray: 1 0.8;
      }
      .fx48-danger path {
        stroke: #b44041;
        stroke-width: 0.65;
      }
      .fx48-danger .fx48-timer {
        stroke: #82595655;
        stroke-width: 0.85;
      }
      .fx48-danger .fx48-timer.on {
        stroke: #b23c37;
      }
      .fx48-danger.imminent rect {
        fill: #ae283a35;
        stroke-width: 0.6;
        stroke-dasharray: none;
      }
      .fx48-danger.imminent .fx48-danger-label {
        fill: #fff1d3;
        stroke: #8f1f2d;
        stroke-width: 0.35;
      }
      .fx48-danger text.fx48-danger-label {
        font-size: 2.4px;
        font-weight: bold;
        fill: #8b2832;
        stroke: #ffe4b7;
        stroke-width: 0.2;
      }
      .fx48-draft path {
        stroke: #e6cba3;
        stroke-width: 0.6;
        paint-order: stroke;
      }
      .fx48-draft text {
        font-weight: bold;
      }
      .fx47-mineBlast .fx47-crossfire {
        animation-delay: 0s;
      }
      .fx47 .fx47-particle {
        animation-delay: var(--delay, 0s);
      }
      @keyframes fx48Hit {
        0% {
          opacity: 0;
          transform: scale(0.12);
        }
        16% {
          opacity: 1;
        }
        50% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: scale(var(--hit-scale, 1));
        }
      }
      
      @media (prefers-reduced-motion: reduce) {
        .fx48-impact {
          animation: none !important;
          opacity: 0.4;
        }
      }
      .fx47-meteorImpact .fx47-particle {
        animation-delay: calc(var(--delay, 0s) + 0.52s);
      }
      .fx49 .fx49-grow {
        stroke-dasharray: 35;
        stroke-dashoffset: 35;
        animation: fx49Draw 1s ease-out both;
        animation-delay: var(--unit-delay, 0s);
      }
      .fx49-frost-shell {
        animation: fx49Frost 1.7s ease-out both;
      }
      .fx49-glint {
        animation: fx49Glint 1.4s ease-out both;
      }
      .fx49-river {
        animation: fx49River 2.5s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-ice-tooth {
        animation: fx49IceTooth 1.7s ease-out both;
        animation-delay: var(--unit-delay, 0s);
        transform-origin: 0 5px;
      }
      .fx49-river-crack {
        stroke-dasharray: 120;
        stroke-dashoffset: 120;
        animation: fx49Draw 1.1s ease-out 0.3s both;
      }
      .fx49-shield-flash {
        animation: fx49ShieldFlash 0.65s ease-out both;
      }
      .fx49-shield-half {
        animation: fx49ShieldShatter 1.4s ease-out 0.22s both;
        transform-origin: 0 0;
      }
      .fx49-crack {
        stroke-dasharray: 30;
        stroke-dashoffset: 30;
        animation: fx49Draw 0.3s linear both;
      }
      .fx49-blast {
        animation: fx49Blast 0.95s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-smoke {
        opacity: 0;
        animation: fx49Smoke 1.8s ease-out 0.25s both;
      }
      .fx49-sword-drop {
        animation: fx49SwordDrop 1.4s cubic-bezier(0.22, 0.7, 0.2, 1) both;
        transform-origin: 0 0;
      }
      .fx49-sword-shadow {
        animation: fx49Shadow 1.6s ease-out both;
      }
      .fx49-blade-wind {
        animation: fx49Wind 1.3s ease-out 0.35s both;
        opacity: 0;
        transform-origin: 0 0;
      }
      .fx49-crown {
        animation: fx49Crown 2.2s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-mantle {
        animation: fx49Mantle 2.1s ease-out both;
      }
      .fx49-regalia-rays {
        animation: fx49Rays 1.9s ease-out 0.2s both;
        opacity: 0;
        transform-origin: 0 0;
      }
      .fx49-counter-shield {
        animation: fx49Counter 1.8s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-counter-rune {
        stroke-dasharray: 20;
        stroke-dashoffset: 20;
        animation: fx49Draw 0.4s ease-out 0.3s both;
      }
      .fx49-rejected {
        animation: fx49Rejected 1.2s ease-out both;
      }
      .fx49-void-pit {
        animation: fx49Pit 2.3s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-void-shard {
        animation: fx49Pull 1.4s ease-in both;
        animation-delay: var(--unit-delay, 0s);
      }
      .fx49-disarm-card {
        animation: fx49CardBreak 1.6s ease-out both;
      }
      .fx49-disarm-cut {
        animation: fx49Cut 0.8s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-prison {
        animation: fx49Prison 1.9s ease-out both;
        transform-origin: 0 5px;
      }
      .fx49-prison-floor {
        animation: fx49Floor 1.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-lock {
        animation: fx49Lock 1.2s ease-out both;
      }
      .fx49-transmute-cage {
        animation: fx49Transmute 1.7s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-new-form {
        animation: fx49NewForm 1.7s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-swap-track {
        animation: fx49Track 1.7s ease-out both;
      }
      .fx49-swap-ghost {
        animation: fx49Swap 1.5s ease-in-out both;
      }
      .fx49-arrow {
        animation: fx49Arrow 1.3s cubic-bezier(0.5, 0.05, 0.8, 0.5) both;
        animation-delay: var(--unit-delay, 0s);
        transform-origin: 0 0;
      }
      .fx49-stone-fragment {
        animation: fx49Stone 1.5s ease-out both;
        animation-delay: var(--unit-delay, 0s);
        transform-origin: 0 0;
      }
      .fx49-ground-split {
        animation: fx49Track 1.9s ease-out both;
      }
      .fx49-holy-shaft {
        animation: fx49HolyShaft 1.8s ease-out both;
      }
      .fx49-holy-wings {
        animation: fx49HolyWings 2.1s ease-out both;
        transform-origin: 0 0;
      }
      @keyframes fx49Draw {
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes fx49Frost {
        0% {
          opacity: 0;
        }
        45%,
        80% {
          opacity: 1;
        }
        100% {
          opacity: 0.3;
        }
      }
      @keyframes fx49Glint {
        0%,
        25% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(2px, -2px);
        }
      }
      @keyframes fx49River {
        0% {
          opacity: 0;
          transform: scaleX(0.05);
        }
        25%,
        75% {
          opacity: 1;
          transform: scaleX(1);
        }
        100% {
          opacity: 0;
          transform: scaleX(1);
        }
      }
      @keyframes fx49IceTooth {
        0% {
          opacity: 0;
          transform: scaleY(0.05);
        }
        35%,
        75% {
          opacity: 1;
          transform: scaleY(1);
        }
        100% {
          opacity: 0.2;
          transform: scaleY(1.05);
        }
      }
      @keyframes fx49ShieldFlash {
        0% {
          opacity: 0;
          transform: scale(0.7);
        }
        25%,
        65% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49ShieldShatter {
        0%,
        10% {
          opacity: 0;
          transform: translate(0, 0);
        }
        15% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(var(--shard-x), 6px) rotate(var(--shard-turn));
        }
      }
      @keyframes fx49Blast {
        0% {
          opacity: 0;
          transform: scale(0.1);
        }
        24% {
          opacity: 1;
          transform: scale(0.9);
        }
        100% {
          opacity: 0;
          transform: scale(1.35);
        }
      }
      @keyframes fx49Smoke {
        0% {
          opacity: 0;
          transform: translate(0, 0) scale(0.5);
        }
        25% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: translate(1px, -8px) scale(1.2);
        }
      }
      @keyframes fx49SwordDrop {
        0% {
          opacity: 0;
          transform: translate(0, -24px) rotate(-20deg);
        }
        15% {
          opacity: 1;
        }
        42% {
          transform: translate(0, 1px) rotate(0);
        }
        50%,
        78% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          transform: translate(0, 0);
        }
      }
      @keyframes fx49Shadow {
        0% {
          opacity: 0;
          transform: scale(0.3);
        }
        40%,
        75% {
          opacity: 0.7;
          transform: scale(1);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49Wind {
        0% {
          opacity: 0;
          transform: scale(0.3) rotate(-40deg);
        }
        25% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: scale(1.3) rotate(30deg);
        }
      }
      @keyframes fx49Crown {
        0% {
          opacity: 0;
          transform: translate(0, -16px) scale(1.2);
        }
        25% {
          opacity: 1;
          transform: translate(0, -3px) scale(1);
        }
        70% {
          opacity: 1;
          transform: translate(0, -3px);
        }
        100% {
          opacity: 0;
          transform: translate(0, -4px);
        }
      }
      @keyframes fx49Mantle {
        0%,
        15% {
          opacity: 0;
          transform: scaleX(0.1);
        }
        45%,
        70% {
          opacity: 0.7;
          transform: scaleX(1);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49Rays {
        0% {
          opacity: 0;
          transform: scale(0.5);
        }
        30% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: scale(1.2);
        }
      }
      @keyframes fx49Counter {
        0% {
          opacity: 0;
          transform: scaleX(0.1);
        }
        25%,
        70% {
          opacity: 1;
          transform: scaleX(1);
        }
        100% {
          opacity: 0;
          transform: scaleX(1.05);
        }
      }
      @keyframes fx49Rejected {
        0% {
          opacity: 0;
          transform: translate(0, -12px);
        }
        20%,
        40% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          transform: translate(0, -7px) scaleX(2);
        }
      }
      @keyframes fx49Pit {
        0% {
          opacity: 0;
          transform: scale(0.05);
        }
        30%,
        65% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(0.02);
        }
      }
      @keyframes fx49Pull {
        0% {
          opacity: 0;
          transform: translate(0, 0) rotate(0);
        }
        15% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(var(--pull-x), var(--pull-y)) rotate(150deg)
            scale(0.1);
        }
      }
      @keyframes fx49CardBreak {
        0% {
          opacity: 0;
          transform: scale(0.7);
        }
        20%,
        40% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-5px, 4px) rotate(-25deg) scale(0.5);
        }
      }
      @keyframes fx49Cut {
        0% {
          opacity: 0;
          transform: scale(0.05);
        }
        30%,
        45% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.2);
        }
      }
      @keyframes fx49Prison {
        0% {
          opacity: 0;
          transform: scaleY(0.05);
        }
        35%,
        75% {
          opacity: 1;
          transform: scaleY(1);
        }
        100% {
          opacity: 0.2;
          transform: scaleY(1);
        }
      }
      @keyframes fx49Floor {
        0% {
          opacity: 0;
          transform: scale(0.2);
        }
        40%,
        75% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49Lock {
        0%,
        25% {
          opacity: 0;
          transform: translate(0, -2px);
        }
        50%,
        100% {
          opacity: 1;
          transform: translate(0, 0);
        }
      }
      @keyframes fx49Transmute {
        0% {
          opacity: 0;
          transform: scale(0.2) rotate(0);
        }
        30%,
        70% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: scale(0.5) rotate(120deg);
        }
      }
      @keyframes fx49NewForm {
        0%,
        35% {
          opacity: 0;
          transform: scale(0.2);
        }
        60%,
        80% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }
      @keyframes fx49Track {
        0% {
          opacity: 0;
        }
        20%,
        70% {
          opacity: 0.75;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49Swap {
        0% {
          opacity: 0;
          transform: translate(0, 0) scale(0.7);
        }
        15% {
          opacity: 0.8;
        }
        50% {
          opacity: 0.7;
          transform: translate(var(--bend-x), var(--bend-y)) scale(1);
        }
        85% {
          opacity: 0.8;
          transform: translate(var(--swap-x), var(--swap-y)) scale(0.7);
        }
        100% {
          opacity: 0;
          transform: translate(var(--swap-x), var(--swap-y)) scale(0.7);
        }
      }
      @keyframes fx49Arrow {
        0% {
          opacity: 0;
          transform: translate(0, var(--arrow-start)) rotate(var(--arrow-angle));
        }
        10% {
          opacity: 1;
        }
        40%,
        75% {
          opacity: 1;
          transform: translate(0, 0) rotate(var(--arrow-angle));
        }
        100% {
          opacity: 0;
          transform: translate(0, 0) rotate(var(--arrow-angle));
        }
      }
      @keyframes fx49Stone {
        0% {
          opacity: 0;
          transform: translate(0, 0) scale(0.5);
        }
        15% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(var(--shard-x), var(--shard-y))
            rotate(var(--shard-turn)) scale(0.3);
        }
      }
      @keyframes fx49HolyShaft {
        0% {
          opacity: 0;
          transform: scaleX(0.05);
        }
        25%,
        65% {
          opacity: 0.9;
          transform: scaleX(1);
        }
        100% {
          opacity: 0;
          transform: scaleX(1.2);
        }
      }
      @keyframes fx49HolyWings {
        0% {
          opacity: 0;
          transform: translate(0, 8px) scale(0.2);
        }
        35%,
        70% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(0, -3px) scale(1.1);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx49 * {
          animation: none !important;
        }
        .fx49 .fx49-grow,
        .fx49 .fx49-crack,
        .fx49 .fx49-counter-rune,
        .fx49 .fx49-river-crack {
          stroke-dashoffset: 0;
        }
        .fx49 .fx49-void-shard,
        .fx49 .fx49-stone-fragment,
        .fx49 .fx49-rejected,
        .fx49 .fx49-smoke {
          display: none;
        }
      }
      .fx49-forge-base {
        animation: fx49Floor 1.9s ease-out both;
      }
      .fx49-barrel-assemble {
        animation: fx49Assemble 1.8s ease-out both;
      }
      .fx49-chain-swing {
        animation: fx49Chain 1.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-chain-glint {
        animation: fx49ChainGlint 1.7s linear both;
      }
      .fx49-rails {
        animation: fx49Rails 1.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-rail-charge {
        animation: fx49RailCharge 1.7s ease-in-out both;
      }
      .fx49-move-compass {
        animation: fx49Compass 1.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-gold-wheel {
        animation: fx49GoldWheel 1.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-yin-lotus {
        animation: fx49Yin 2s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-yin-fence {
        animation: fx49Floor 1.9s ease-out both;
      }
      .fx49-jade-left {
        animation: fx49JadeLeft 1.9s ease-out both;
      }
      .fx49-jade-right {
        animation: fx49JadeRight 1.9s ease-out both;
      }
      .fx49-immortal-bridge {
        animation: fx49Floor 1.8s ease-out both;
      }
      .fx49-hunt-eye {
        animation: fx49Eye 1.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx49-hunt-focus {
        animation: fx49Focus 1.9s ease-out both;
        transform-origin: 0 0;
      }
      @keyframes fx49Assemble {
        0% {
          opacity: 0;
          transform: translate(0, -13px);
        }
        30% {
          opacity: 1;
          transform: translate(0, 1px);
        }
        45%,
        80% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49Chain {
        0% {
          opacity: 0;
          transform: scaleX(0.2) rotate(-25deg);
        }
        25%,
        75% {
          opacity: 1;
          transform: scaleX(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: rotate(8deg);
        }
      }
      @keyframes fx49ChainGlint {
        0%,
        20% {
          stroke-dashoffset: 30;
          opacity: 0;
        }
        30%,
        70% {
          opacity: 1;
        }
        100% {
          stroke-dashoffset: -30;
          opacity: 0;
        }
      }
      @keyframes fx49Rails {
        0% {
          opacity: 0;
          transform: scaleX(3) scaleY(0.1);
        }
        35%,
        75% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1);
        }
      }
      @keyframes fx49RailCharge {
        0%,
        25% {
          opacity: 0;
          transform: translate(0, 10px);
        }
        35%,
        65% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(0, -10px);
        }
      }
      @keyframes fx49Compass {
        0% {
          opacity: 0;
          transform: scale(0.1);
        }
        40%,
        75% {
          opacity: 0.8;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.15);
        }
      }
      @keyframes fx49GoldWheel {
        0% {
          opacity: 0;
          transform: scale(0.2) rotate(-100deg);
        }
        30%,
        75% {
          opacity: 1;
          transform: scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: rotate(45deg);
        }
      }
      @keyframes fx49Yin {
        0% {
          opacity: 0;
          transform: scale(0.1) rotate(-35deg);
        }
        35%,
        75% {
          opacity: 1;
          transform: scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: scale(1.1) rotate(15deg);
        }
      }
      @keyframes fx49JadeLeft {
        0% {
          opacity: 0;
          transform: translate(-10px, 0);
        }
        35%,
        75% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49JadeRight {
        0% {
          opacity: 0;
          transform: translate(10px, 0);
        }
        35%,
        75% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fx49Eye {
        0% {
          opacity: 0;
          transform: scaleY(0.05);
        }
        30%,
        75% {
          opacity: 1;
          transform: scaleY(1);
        }
        100% {
          opacity: 0;
          transform: scaleY(0.05);
        }
      }
      @keyframes fx49Focus {
        0% {
          opacity: 0;
          transform: scale(1.7) rotate(-15deg);
        }
        35%,
        75% {
          opacity: 1;
          transform: scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: scale(0.8);
        }
      }

      
.fx50-overlay text {
        text-anchor: middle;
        font:
          700 3.1px Microsoft YaHei,
          sans-serif;
        fill: #fff0bc;
        stroke: #2d2430;
        stroke-width: 0.1;
        paint-order: stroke;
      }
      .fx50-overlay text.fx50-zone-label {
        font-size: 2.3px;
        fill: #fff6c9;
        stroke: #70402d;
        stroke-width: 0.18;
      }

      .draw-preview {
        padding: 12px;
        margin: 8px 0;
        background: #193e49;
        border: 1px solid #65c9da;
        border-radius: 8px;
      }
      .draw-preview > b {
        color: #ffdf80;
      }
      .draw-preview > span {
        display: block;
        color: #bfe9f2;
        font-size: 12px;
      }
      .draw-preview p {
        margin: 5px 0 0;
      }
      .ink-line-main {
        stroke-width: 1.15;
        stroke-dasharray: none;
      }
      .ink-line-shadow {
        stroke: #fff8d0;
        stroke-width: 1.7;
        opacity: 0.6;
      }
      .ink-endpoint {
        stroke: #fff7cc;
        stroke-width: 0.3;
      }
      .ink-draft-line {
        stroke: #53eafa;
        filter: none;
      }
      .piece:before,
      .piece:after,
      .ice-river,
      .point {
        animation: none !important;
      }
      .chat-dock,
      .chat-dock .chat-panel {
        filter: none;
        backdrop-filter: none;
      }
      .board svg.fx-scene {
        contain: layout paint;
      }
      body:before {
        mix-blend-mode: normal;
      }

      /* Environment markers are static; only actual events animate once. */
      .env-mine text {
        font-size: 2.45px !important;
        stroke: #352a1f !important;
        stroke-width: 0.15 !important;
        fill: #fff0af !important;
      }
      .env-mine.draft {
        opacity: 0.65;
      }
      .env-link {
        fill: none;
        stroke: #ad3855;
        stroke-width: 0.4;
        opacity: 0.8;
      }
      .env-link path {
        stroke-dasharray: 1.2 0.7;
      }
      .env-link circle {
        stroke-width: 0.25;
      }
      .env-echo {
        fill: none;
        stroke: #596f91;
        stroke-width: 0.45;
      }
      .env-life {
        fill: #65502e;
        stroke: #e9d896;
        stroke-width: 0.3;
      }
      .env-zone-wash {
        fill: #458e7c12;
        stroke: none;
      }
      .env-zone-grid {
        fill: none;
        stroke: #438c7b;
        stroke-width: 0.22;
        opacity: 0.65;
      }
      .env-zone-corners {
        fill: none;
        stroke: #2e7267;
        stroke-width: 0.8;
      }
      .env-zone-arrow {
        fill: none;
        stroke: #8b713d;
        stroke-width: 0.6;
      }
      .env-tile-face {
        fill: #7d3b231a;
        stroke: #a05d3e;
        stroke-width: 0.22;
        stroke-opacity: 0.55;
      }
      .env-tile-crack {
        fill: none;
        stroke: #a7613b;
        stroke-width: 0.4;
        opacity: 0.8;
      }
      .env-warning-frame {
        fill: none;
        stroke: #a05a39;
        stroke-width: 0.35;
        stroke-dasharray: 1 0.7;
      }
      .env-warning-corners {
        fill: none;
        stroke: #b36236;
        stroke-width: 0.8;
      }
      .env-warning.imminent .env-tile-face {
        fill: #9e3e252a;
        stroke: #bd5b32;
        stroke-width: 0.4;
      }
      .env-warning.imminent .env-tile-crack {
        stroke: #b24622;
        stroke-width: 0.65;
      }
      .env-warning.imminent .env-warning-corners {
        stroke: #943b29;
        stroke-width: 1.1;
      }
      .env-event {
        pointer-events: none;
        animation: env-fade 1.35s ease-out both;
      }
      .env-event .env-tile.impact {
        animation: env-tile-flash 0.9s 0.28s ease-out both;
      }
      .env-event .env-tile.blast {
        animation: env-tile-flash 0.75s var(--chain, 0ms) ease-out both;
      }
      .env-tile.impact .env-tile-face,
      .env-tile.blast .env-tile-face {
        fill: #e58f3a55;
        stroke: #b25c2c;
        stroke-width: 0.55;
      }
      .env-meteor-fall {
        animation: env-meteor-fall 0.42s cubic-bezier(0.5, 0.05, 0.85, 0.45)
          both;
      }
      .env-impact-ground {
        animation: env-ground 0.95s 0.28s ease-out both;
      }
      .env-shock {
        transform-origin: 0 0;
        animation: env-shock 0.8s 0.28s ease-out both;
      }
      .env-burst {
        transform-origin: 0 0;
        animation: env-burst 0.7s var(--chain, 0ms) ease-out both;
      }
      .env-arm {
        animation: env-arm 0.65s ease-out both;
        transform-origin: 0 0;
      }
      .env-rotor {
        animation: env-turn 0.85s cubic-bezier(0.2, 0.65, 0.2, 1) both;
        transform-origin: 0 0;
        fill: none;
        stroke: #397a71;
        stroke-width: 0.45;
      }
      .env-rotor-arrow {
        fill: none;
        stroke: #96733b;
        stroke-width: 1;
      }
      .env-graft {
        animation: env-arm 0.8s ease-out both;
        transform-origin: 0 0;
      }
      @keyframes env-fade {
        0% {
          opacity: 0;
        }
        12%,
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes env-tile-flash {
        0% {
          opacity: 0;
        }
        25% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes env-meteor-fall {
        0% {
          transform: translate(17px, -33px);
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        80% {
          transform: translate(0, 0);
          opacity: 1;
        }
        100% {
          transform: translate(0, 0);
          opacity: 0;
        }
      }
      @keyframes env-ground {
        0% {
          opacity: 0;
        }
        20%,
        80% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes env-shock {
        0% {
          transform: scale(0.3);
          opacity: 0;
        }
        25% {
          opacity: 0.9;
        }
        100% {
          transform: scale(1.2);
          opacity: 0;
        }
      }
      @keyframes env-burst {
        0% {
          transform: scale(0.4);
          opacity: 0;
        }
        35% {
          transform: scale(1);
          opacity: 1;
        }
        100% {
          transform: scale(1.15);
          opacity: 0;
        }
      }
      @keyframes env-arm {
        0% {
          transform: scale(0.6);
          opacity: 0;
        }
        65% {
          transform: scale(1.08);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0;
        }
      }
      @keyframes env-turn {
        0% {
          transform: rotate(-90deg);
          opacity: 0;
        }
        30% {
          opacity: 1;
        }
        100% {
          transform: rotate(0);
          opacity: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .env-event {
          animation: skill-event-static 0.35s linear both;
        }
        .env-event * {
          animation: none !important;
        }
      }
    


      /* Status effects use symbols and materials, not oversized text labels. */
      .piece.frozen-mark:after {
        content: "";
        inset: -8px;
        border: 2px solid #bdf8ff;
        background: conic-gradient(
          from 22deg,
          transparent 0 8%,
          #e9ffffdd 9% 12%,
          transparent 13% 22%
        );
        box-shadow:
          inset 0 0 9px #35cfff99,
          0 0 12px #74eaff;
        border-radius: 50%;
        animation: freezePulse 1.2s ease-in-out infinite alternate;
      }
      .piece.shielded:before {
        content: "";
        inset: -9px;
        border: 2px solid #ffe58a;
        background: linear-gradient(145deg, #fff6bb55, #c68a1788);
        clip-path: polygon(50% 0, 91% 16%, 83% 70%, 50% 100%, 17% 70%, 9% 16%);
        box-shadow:
          inset 0 0 9px #fff5c5,
          0 0 14px #ffc928;
        animation: shieldPulse 1.25s ease-in-out infinite alternate;
      }
      
      .lightning {
        width: 5.2%;
        aspect-ratio: 0.58;
        font-size: 0;
        background: linear-gradient(145deg, #fffbd0, #ffe548 45%, #62cfff);
        clip-path: polygon(
          56% 0,
          100% 0,
          69% 40%,
          96% 40%,
          20% 100%,
          42% 56%,
          12% 56%
        );
        filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #45aaff);
        animation: thunder 1.25s steps(2) forwards;
      }
      .fx-cart-vehicle:before {
        content: "";
        background: repeating-linear-gradient(
          90deg,
          #e5a458 0 16%,
          #804019 17% 20%
        );
        box-shadow:
          inset 0 0 0 3px #ffdaa26b,
          0 3px 7px #241006aa;
      }
      
      .fx2-cavalry i {
        left: -15%;
      }
      
    


      .fx3-arrow {
        position: absolute;
        width: 1.25%;
        height: 11%;
        z-index: 12;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          transparent,
          #ffe8a5 32% 68%,
          transparent
        );
        box-shadow: 0 0 7px #ffbd45;
        transform: translate(-50%, -15%);
        animation: fx3Arrow 0.9s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
      }
      .fx3-arrow:before {
        content: "";
        position: absolute;
        left: 50%;
        top: -18%;
        width: 260%;
        aspect-ratio: 1;
        transform: translateX(-50%) rotate(45deg);
        border-left: 2px solid #fff0bd;
        border-top: 2px solid #fff0bd;
      }
      .fx3-arrow:after {
        content: "";
        position: absolute;
        left: -70%;
        bottom: 0;
        width: 240%;
        height: 2px;
        background: #ffe8a5;
        box-shadow: 0 -6px #ffe8a5;
        transform: rotate(28deg);
      }
      .fx3-arrow.reverse {
        transform: translate(-50%, -85%) rotate(180deg);
      }
      
      
      .fx3-hatch {
        background: radial-gradient(
          ellipse at 50% 62%,
          #fff8dc 0 26%,
          #d7b36d 28% 38%,
          transparent 40%
        );
        animation: fx3Hatch 1.55s ease-out forwards;
      }
      .fx3-hatch:after {
        inset: 18% 8%;
        background: linear-gradient(
          145deg,
          transparent 46%,
          #6b4a24 48% 52%,
          transparent 54%
        );
        clip-path: polygon(
          0 0,
          100% 0,
          82% 38%,
          62% 20%,
          50% 56%,
          37% 18%,
          17% 40%
        );
      }
      
      
      
      
      .fx3-ambush {
        --c: #e6433d;
        background: conic-gradient(
          from 45deg,
          transparent 0 18%,
          #ffb37b 20% 24%,
          transparent 26% 48%,
          #bf1f28 50% 55%,
          transparent 57%
        );
        clip-path: polygon(
          48% 0,
          58% 41%,
          100% 48%,
          61% 57%,
          52% 100%,
          43% 59%,
          0 51%,
          40% 43%
        );
        filter: drop-shadow(0 0 6px #d3212f);
        animation: fx3Ambush 1.55s ease-out forwards;
      }
      .fx3-ambush.diag {
        transform: translate(-50%, -50%) rotate(45deg);
      }
      
      
      
      
      
      
      
      
      
      
      .fx3-assassin-marker {
        position: absolute;
        width: 8.4%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        z-index: 2;
        border-radius: 50%;
        pointer-events: none;
        background:
          radial-gradient(circle, #1b0d26 0 23%, transparent 25%),
          conic-gradient(
            from 0deg,
            transparent 0 9%,
            #7744a488 10% 13%,
            transparent 14% 33%
          );
        box-shadow: 0 0 12px #8f4ac488;
        animation: fx3Marker 1.65s ease-in-out infinite alternate;
      }
      .fx3-theft {
        background: radial-gradient(
          circle at 78% 28%,
          #733ab744,
          transparent 28%
        );
      }
      .fx3-theft i {
        position: absolute;
        left: 82%;
        top: 28%;
        width: 7%;
        aspect-ratio: 0.7;
        border: 1px solid #e9d7ff;
        border-radius: 8%;
        background: linear-gradient(145deg, #efe0ff, #8452c4 48%, #241239);
        box-shadow: 0 0 14px #bd7eff;
        animation: fx3Steal 1.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .fx3-theft i:after {
        content: "";
        position: absolute;
        inset: 24%;
        border: 1px solid #fff8;
        border-radius: 50%;
        background: conic-gradient(transparent, #fff, transparent);
      }
      .fx3-harvest {
        background: linear-gradient(0deg, #dca82922, transparent 45%);
      }
      .fx3-harvest i {
        position: absolute;
        bottom: -8%;
        left: var(--x);
        width: 1.2%;
        height: 32%;
        transform-origin: bottom;
        background: linear-gradient(90deg, #a96c15, #ffe58b, #8c5410);
        border-radius: 90% 10% 70% 20%;
        filter: drop-shadow(0 0 3px #ffc94c);
        animation: fx3Grow 1.8s ease-out var(--d) both;
      }
      .fx3-harvest i:before,
      .fx3-harvest i:after {
        content: "";
        position: absolute;
        width: 330%;
        height: 22%;
        left: -260%;
        top: var(--leaf);
        border-radius: 100% 0;
        background: #e7b73d;
        transform: rotate(24deg);
      }
      .fx3-harvest i:after {
        left: 20%;
        top: calc(var(--leaf) + 17%);
        transform: rotate(-24deg);
      }
      @keyframes fx3Arrow {
        0% {
          opacity: 0;
          margin-top: 13%;
          filter: blur(4px);
        }
        25%,
        75% {
          opacity: 1;
          margin-top: 0;
          filter: blur(0);
        }
        100% {
          opacity: 0;
          margin-top: -5%;
        }
      }
      
      @keyframes fx3Hatch {
        0% {
          opacity: 0;
          transform: translate(-50%, -30%) scale(0.5);
        }
        38%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -70%) scale(1.7);
        }
      }
      
      
      @keyframes fx3Ambush {
        0% {
          opacity: 0;
          transform: translate(-50%, -20%) scale(0.2);
        }
        38%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.25);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -75%) scale(1.7);
        }
      }
      
      
      
      
      
      
      @keyframes fx3Marker {
        to {
          filter: brightness(1.55);
          transform: translate(-50%, -50%) scale(1.08);
        }
      }
      @keyframes fx3Steal {
        0% {
          opacity: 0;
          transform: rotate(12deg) scale(0.6);
        }
        25% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          left: 12%;
          top: 68%;
          transform: rotate(-18deg) scale(1.15);
        }
      }
      @keyframes fx3Grow {
        0% {
          opacity: 0;
          transform: scaleY(0.05) rotate(-8deg);
        }
        45%,
        78% {
          opacity: 1;
          transform: scaleY(1) rotate(2deg);
        }
        100% {
          opacity: 0;
          transform: scaleY(1.15) rotate(5deg);
        }
      }
    


      .fx3-spirit-trail {
        --c: #a984e9;
        background: linear-gradient(
          90deg,
          transparent,
          #e8d8ff,
          #7753a8,
          transparent
        );
        height: 4%;
        aspect-ratio: auto;
        border-radius: 999px;
        filter: blur(1px) drop-shadow(0 0 6px #b58cff);
        animation: fx3Spirit 1.2s ease-out forwards;
      }

      @keyframes fx3Spirit {
        0% {
          opacity: 0;
          transform: translate(-85%, -50%) scaleX(0.2);
        }
        35%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scaleX(1.3);
        }
        100% {
          opacity: 0;
          transform: translate(5%, -50%) scaleX(1.8);
        }
      }
    


      .board .ice-river,
      .board .fx3-assassin-marker,
      .board .piece.frozen-mark:after,
      .board .piece.shielded:before,
      .board .holy-shield:after,
      .board .momentum-shield:before {
        animation: none;
      }
      .board {
        contain: layout paint style;
        isolation: isolate;
      }
      @media (max-width: 650px) {
        .piece {
          box-shadow: 1px 2px 3px #5437;
        }
        .piece.can-capture {
          box-shadow: 0 0 7px #f04444;
        }
        .fx-scene,
        .fx-mark,
        .fx-cell,
        .fx3-arrow {
          filter: none !important;
        }
        .piece.frozen-mark:after,
        .piece.shielded:before,
        .holy-shield:after,
        .momentum-shield:before {
          animation-duration: 2.4s !important;
          box-shadow: none !important;
        }
        .fx3-assassin-marker {
          animation: none;
          box-shadow: 0 0 5px #8f4ac466;
        }
        .ice-river {
          animation: none;
          box-shadow: 0 0 8px #69dafa;
        }
      }
    


      .piece.move-preview {
        z-index: 9;
        transition:
          left 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
          top 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
          transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
        transform: translate(-50%, -50%) scale(1.06);
      }
      .piece.capture-preview {
        pointer-events: none;
        transition:
          opacity 130ms ease,
          transform 130ms ease;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.45);
      }
    


      .board svg.fx-role-swap,
      .board svg.fx-bridge-crack {
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 12;
        pointer-events: none;
        overflow: visible;
      }
      .fx-role-thread {
        fill: none;
        stroke: #ffe8c7;
        stroke-width: 0.48;
        stroke-linecap: round;
        stroke-dasharray: 3 2;
        filter: drop-shadow(0 0 1.8px #ff4d77);
        animation: roleThreadDraw 1.75s ease-out forwards;
      }
      .fx-role-thread.ghost {
        stroke: #ff587f;
        stroke-width: 1.45;
        opacity: 0.3;
        stroke-dasharray: none;
      }
      .fx-role-string {
        stroke: #f7ead7;
        stroke-width: 0.28;
        stroke-dasharray: 2 1;
        filter: drop-shadow(0 0 1px #ff6a86);
        animation: roleStringDrop 1.65s ease-out forwards;
      }
      .fx-role-string.delay,
      .fx-role-knot.delay {
        animation-delay: 0.13s;
      }
      .fx-role-knot {
        fill: #fff4df;
        stroke: #c52855;
        stroke-width: 0.6;
        transform-box: fill-box;
        transform-origin: center;
        animation: roleKnot 1.75s ease-out forwards;
      }
      .fx-bridge-crack path {
        fill: none;
        stroke: #fff2d0;
        stroke-width: 1.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 22;
        filter: drop-shadow(0 0 2px #ff3c23);
        animation: bridgeRip 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay)
          both;
      }
      .fx-bridge-crack path.chip {
        stroke: #a51e1e;
        stroke-width: 0.65;
        stroke-dasharray: 7;
        animation-duration: 1.85s;
      }
      .fx-new-defection {
        width: 13%;
        aspect-ratio: 1;
        z-index: 12;
        pointer-events: none;
      }
      
      
      
      
      
      .fx-new-defection {
        border-radius: 50%;
        background: conic-gradient(
          #bd3028 0 45%,
          #f3dfb5 46% 54%,
          #303b3a 55% 100%
        );
        mask: radial-gradient(
          circle,
          transparent 0 46%,
          #000 48% 61%,
          transparent 63%
        );
        -webkit-mask: radial-gradient(
          circle,
          transparent 0 46%,
          #000 48% 61%,
          transparent 63%
        );
        animation: defectionFlip 1.75s cubic-bezier(0.25, 0.75, 0.2, 1) forwards;
      }
      .fx-new-defection:after {
        content: "";
        position: absolute;
        inset: 7%;
        border-top: 3px solid #fff4cf;
        border-bottom: 3px solid #fff4cf;
        border-radius: 50%;
        filter: drop-shadow(0 0 5px #ffc86b);
      }
      .fx-new-defection.to-black {
        animation-name: defectionFlipBlack;
      }
      
      
      
      
      
      
      
      
      
      
      
      
      
      @keyframes roleThreadDraw {
        0% {
          opacity: 0;
          stroke-dashoffset: 60;
        }
        24%,
        74% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
        }
      }
      @keyframes roleStringDrop {
        0% {
          opacity: 0;
          stroke-dashoffset: 30;
        }
        26%,
        76% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
        }
      }
      @keyframes roleKnot {
        0% {
          opacity: 0;
          transform: scale(0.1);
        }
        38%,
        72% {
          opacity: 1;
          transform: scale(1.3);
        }
        100% {
          opacity: 0;
          transform: scale(0.5);
        }
      }
      @keyframes bridgeRip {
        0% {
          opacity: 0;
          stroke-dashoffset: 22;
        }
        28%,
        74% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
          stroke-width: 2.2;
        }
      }
      
      
      
      @keyframes defectionFlip {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotateY(0) rotate(0) scale(0.3);
        }
        40%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) rotateY(180deg) rotate(150deg)
            scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotateY(360deg) rotate(300deg)
            scale(0.5);
        }
      }
      @keyframes defectionFlipBlack {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotateY(360deg) rotate(0) scale(0.3);
        }
        40%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) rotateY(180deg) rotate(-150deg)
            scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotateY(0) rotate(-300deg) scale(0.5);
        }
      }
      
      
      
      
      
      
      @media (max-width: 650px) {
        .fx-new-defection {
          width: 15%;
        }
        .fx-role-thread,
        .fx-role-string,
        .fx-bridge-crack path {
          filter: none;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-role-thread,
.fx-role-string,
.fx-role-knot,
.fx-bridge-crack path,
.fx-new-defection {
          animation-duration: 0.55s !important;
          animation-iteration-count: 1 !important;
        }
      }
    


      .fx-rubber-wave {
        width: 10%;
        height: 6%;
        border: 3px solid #f6db78;
        border-radius: 50%;
        background: radial-gradient(
          ellipse,
          transparent 38%,
          #ffe99a44 40% 58%,
          transparent 60%
        );
        box-shadow: 0 0 8px #ffb73c;
        animation: rubberBounce 1.35s cubic-bezier(0.2, 0.9, 0.25, 1)
          var(--delay) both;
      }
      .fx-rubber-wave:after {
        content: "";
        position: absolute;
        left: 42%;
        top: -90%;
        width: 16%;
        height: 280%;
        border-radius: 50%;
        background: linear-gradient(#fff5b3, transparent 32% 68%, #f0a52f);
        opacity: 0.75;
      }
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      @keyframes rubberBounce {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleX(0.25) scaleY(2.2);
        }
        30% {
          opacity: 1;
          transform: translate(-50%, -50%) scaleX(1.45) scaleY(0.55);
        }
        52% {
          transform: translate(-50%, -50%) scaleX(0.75) scaleY(1.55);
        }
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleX(1.6) scaleY(0.3);
        }
      }
      
      
      
      
      
      
      
      
      
      @media (max-width: 650px) {
        
        .fx-rubber-wave {
          border-width: 2px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-rubber-wave {
          animation-duration: 0.55s !important;
          animation-iteration-count: 1 !important;
        }
      }
    


      .fx-joy-lock {
        bottom: auto;
        height: 55%;
        overflow: hidden;
        background: linear-gradient(#a7d5e422, transparent);
        animation: lockVeil 2s ease-out forwards;
      }
      .fx-joy-lock.lower {
        top: 45%;
        transform: rotate(180deg);
      }
      .fx-joy-lock i {
        position: absolute;
        left: calc(22% + var(--n) * 27%);
        top: -22%;
        width: 8%;
        height: 42%;
        border: 1px solid #efffff;
        background: repeating-linear-gradient(
          0deg,
          #d9f2ef 0 7%,
          #4a8f9a 8% 10%,
          #e8f7eb 11% 18%
        );
        box-shadow: 0 0 8px #87e5ec;
        transform-origin: top;
        animation: charmDrop 1.65s cubic-bezier(0.2, 0.8, 0.2, 1)
          calc(var(--n) * 0.11s) both;
      }
      .fx-joy-lock i:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -12%;
        width: 2px;
        height: 22%;
        background: #d9ffff;
        box-shadow: 0 0 4px #6de1eb;
      }
      .fx-supply-lock {
        overflow: hidden;
        animation: motion-scene-fade 1.9s ease-out forwards;
      }
      .fx-supply-lock.lower {
        transform: rotate(180deg);
      }
      .fx-supply-lock i {
        position: absolute;
        top: 26%;
        width: 46%;
        height: 2%;
        border-top: 3px dashed #f4d38d;
        filter: drop-shadow(0 0 4px #e17d33);
        animation: supplyCut 1.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .fx-supply-lock i:first-child {
        left: -3%;
        transform: rotate(13deg);
        transform-origin: left;
      }
      .fx-supply-lock i:nth-child(2) {
        right: -3%;
        transform: rotate(-13deg);
        transform-origin: right;
      }
      .fx-supply-lock b {
        position: absolute;
        left: 50%;
        top: 37%;
        width: 12%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        background: conic-gradient(
          from 12deg,
          transparent 0 12%,
          #fff0ba 14% 18%,
          transparent 20% 38%,
          #df6a35 40% 45%,
          transparent 47% 66%,
          #fff0ba 68% 72%,
          transparent 74%
        );
        clip-path: polygon(
          50% 0,
          61% 38%,
          100% 50%,
          62% 60%,
          50% 100%,
          39% 62%,
          0 50%,
          38% 40%
        );
        filter: drop-shadow(0 0 5px #ff7b39);
        animation: supplySnap 1.55s ease-out forwards;
      }
      .fx-skill-fizzle {
        background: radial-gradient(
          circle at 50% 50%,
          #96c8c522,
          transparent 24%
        );
        animation: fizzleScene 1.35s ease-out forwards;
      }
      .fx-skill-fizzle i {
        position: absolute;
        left: calc(43% + (var(--n) - 1.5) * 5%);
        top: 48%;
        width: 3.5%;
        aspect-ratio: 1;
        border: 1px solid #c9eeee;
        border-radius: 50%;
        box-shadow: inset 0 0 5px #6daeb0;
        animation: fizzleBubble 1.15s ease-out calc(var(--n) * 0.08s) both;
      }
      .fx-skill-fizzle.supply i {
        border-radius: 2px;
        transform: rotate(45deg);
        border-color: #e8c88d;
        box-shadow: inset 0 0 5px #a36c34;
      }
      @keyframes lockVeil {
        0% {
          opacity: 0;
          filter: blur(9px);
        }
        25%,
        76% {
          opacity: 1;
          filter: blur(0);
        }
        100% {
          opacity: 0;
          filter: blur(5px);
        }
      }
      @keyframes charmDrop {
        0% {
          opacity: 0;
          top: -35%;
          transform: rotate(calc((var(--n) - 1) * 12deg)) scaleY(0.25);
        }
        38%,
        78% {
          opacity: 1;
          top: 20%;
          transform: rotate(calc((var(--n) - 1) * 4deg)) scaleY(1);
        }
        100% {
          opacity: 0;
          top: 28%;
          transform: rotate(0) scaleY(1.08);
        }
      }
      
      @keyframes supplyCut {
        0% {
          width: 0;
          opacity: 0;
        }
        45%,
        75% {
          width: 46%;
          opacity: 1;
        }
        100% {
          width: 39%;
          opacity: 0;
          filter: blur(3px);
        }
      }
      @keyframes supplySnap {
        0%,
        35% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1) rotate(0);
        }
        55%,
        78% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.2) rotate(90deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2) rotate(180deg);
        }
      }
      @keyframes fizzleScene {
        0% {
          opacity: 0;
        }
        25%,
        65% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes fizzleBubble {
        0% {
          opacity: 0;
          transform: translateY(120%) scale(0.2);
        }
        38% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translateY(-280%) scale(1.6);
        }
      }
      @media (max-width: 650px) {
        .fx-joy-lock i,
        .fx-supply-lock i,
        .fx-supply-lock b {
          filter: none !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-joy-lock,
        .fx-joy-lock i,
        .fx-supply-lock,
        .fx-supply-lock i,
        .fx-supply-lock b,
        .fx-skill-fizzle,
        .fx-skill-fizzle i {
          animation-duration: 0.55s !important;
          animation-iteration-count: 1 !important;
        }
      }
    


      .board svg.fx-horse-links,
      .board svg.fx-blood-lines {
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 12;
        pointer-events: none;
        overflow: visible;
      }
      .fx-hoof-awaken {
        width: 12%;
        aspect-ratio: 1;
        border: 5px solid #f2c77e;
        border-top-color: transparent;
        border-radius: 50% 50% 45% 45%;
        filter: drop-shadow(0 0 5px #c8792e);
        animation: hoofStamp 1.55s cubic-bezier(0.2, 0.85, 0.2, 1) forwards;
      }
      .fx-hoof-awaken:after {
        content: "";
        position: absolute;
        left: 18%;
        right: 18%;
        bottom: -18%;
        height: 22%;
        border-radius: 50%;
        background: radial-gradient(ellipse, #f9e0a777, transparent 70%);
        animation: hoofDust 1.3s 0.2s ease-out both;
      }

      .fx-drunken-cloud {
        width: 15%;
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          radial-gradient(circle at 30% 64%, #f9edd2aa 0 14%, transparent 16%),
          radial-gradient(circle at 54% 53%, #fff7e3bb 0 21%, transparent 23%),
          radial-gradient(circle at 76% 68%, #d9c8aa99 0 13%, transparent 15%);
        animation: drunkDrift 2.05s ease-in-out forwards;
      }
      .fx-drunken-cloud:before,
      .fx-drunken-cloud:after {
        content: "";
        position: absolute;
        width: 16%;
        aspect-ratio: 1;
        border: 2px solid #f5d798;
        border-radius: 50%;
        left: 22%;
        top: 17%;
        animation: drunkBubble 1.45s ease-out both;
      }
      .fx-drunken-cloud:after {
        left: 65%;
        top: 6%;
        width: 11%;
        animation-delay: 0.18s;
      }
      .fx-blue-lotus {
        width: 15%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: repeating-conic-gradient(
          from 0deg,
          #bff9ff 0 12deg,
          #3fc6dd 14deg 27deg,
          transparent 29deg 45deg
        );
        filter: drop-shadow(0 0 6px #2ce7ff);
        animation: lotusBloom 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .fx-blue-lotus:after {
        content: "";
        position: absolute;
        inset: 31%;
        border-radius: 50%;
        background: radial-gradient(circle, #fffbd2, #6be4ee 55%, #147797);
        box-shadow: 0 0 8px #eaffff;
      }
      .fx-golden-token {
        width: 14%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 5px double #ffe79b;
        background: radial-gradient(
          circle,
          #fff1ac 0 20%,
          #dba843 22% 43%,
          #7e4b1d 45% 53%,
          #f5ca67 55%
        );
        box-shadow: 0 0 14px #ffbd35;
        animation: tokenDrop 1.85s cubic-bezier(0.15, 0.85, 0.2, 1) forwards;
      }
      .fx-golden-token:before,
      .fx-golden-token:after {
        content: "";
        position: absolute;
        left: 47%;
        top: 15%;
        width: 6%;
        height: 70%;
        background: #fff4bd;
        box-shadow: 0 0 4px #fff;
      }
      .fx-golden-token:after {
        transform: rotate(90deg);
      }
      .fx-creation-cards {
        background: radial-gradient(circle, #f5e4b933, transparent 28%);
        animation: motion-scene-fade 2s ease-out forwards;
      }
      .fx-creation-cards i {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12%;
        height: 20%;
        border: 2px solid #fff0bd;
        border-radius: 8%;
        background: linear-gradient(145deg, #f8e8bf, #8b5f3e 52%, #38271f);
        box-shadow: 0 0 12px #ffca62;
        animation: cardSplit 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .fx-creation-cards i:nth-child(2) {
        animation-name: cardSplitRight;
      }
      .fx-creation-cards b {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 2%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 16px 8px #ffd66d;
        animation: cardFlash 1.3s ease-out forwards;
      }
      .fx-horse-links path {
        fill: none;
        stroke: #ffe29b;
        stroke-width: 0.65;
        stroke-dasharray: 2 1;
        filter: drop-shadow(0 0 2px #ff8c2f);
        animation: horseLinkDraw 1.8s ease-out forwards;
      }
      .fx-horse-links path.wide {
        stroke: #7a351e;
        stroke-width: 2.1;
        stroke-dasharray: none;
        opacity: 0.35;
      }
      .fx-horse-links circle {
        fill: #fff0b1;
        stroke: #9e421f;
        stroke-width: 0.6;
        animation: horseNode 1.7s ease-out forwards;
      }
      .fx-fuse-ignite {
        width: 12%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: conic-gradient(
          from 45deg,
          transparent 0 40%,
          #47342a 42% 48%,
          transparent 50%
        );
        animation: fuseCurl 1.65s ease-out forwards;
      }
      .fx-fuse-ignite:before {
        content: "";
        position: absolute;
        right: 3%;
        top: 5%;
        width: 25%;
        aspect-ratio: 1;
        background: radial-gradient(
          circle,
          #fff 0 9%,
          #ffe75f 12% 27%,
          #ff6a24 30% 48%,
          transparent 52%
        );
        box-shadow: 0 0 8px #ff6b24;
        animation: fuseSpark 0.3s steps(2) 5;
      }
      .fx-fuse-ignite:after {
        content: "";
        position: absolute;
        left: 13%;
        bottom: 10%;
        width: 67%;
        height: 25%;
        border-bottom: 4px dotted #e4c9a0;
        border-radius: 50%;
      }
      .fx-fortress-rise {
        width: 13%;
        height: 12%;
        background: repeating-linear-gradient(
          0deg,
          #8c5b3a 0 18%,
          #e2b26e 19% 24%,
          #623a27 25% 43%
        );
        clip-path: polygon(
          0 24%,
          18% 24%,
          18% 0,
          35% 0,
          35% 24%,
          65% 24%,
          65% 0,
          82% 0,
          82% 24%,
          100% 24%,
          100% 100%,
          0 100%
        );
        filter: drop-shadow(0 0 4px #4b2818);
        animation: fortressBuild 1.45s cubic-bezier(0.2, 0.85, 0.2, 1)
          var(--delay) both;
      }
      .fx-imperial-sword {
        width: 13%;
        height: 19%;
        background: linear-gradient(
          90deg,
          transparent 45%,
          #fff5c9 47% 50%,
          #d2a34d 52% 55%,
          transparent 57%
        );
        filter: drop-shadow(0 0 7px #ffc840);
        animation: imperialUnsheathe 1.8s ease-out forwards;
      }
      .fx-imperial-sword:before {
        content: "";
        position: absolute;
        left: 17%;
        right: 17%;
        top: 61%;
        height: 8%;
        border: 2px solid #ffe39a;
        background: #8e351e;
        transform: rotate(-8deg);
      }
      .fx-imperial-sword:after {
        content: "";
        position: absolute;
        left: 42%;
        bottom: 2%;
        width: 16%;
        height: 34%;
        border-radius: 3px;
        background: linear-gradient(90deg, #4a2017, #bc6e31, #4a2017);
      }
      .fx-blood-lines path {
        fill: none;
        stroke: #d62635;
        stroke-width: 0.65;
        stroke-linecap: round;
        stroke-dasharray: 3 2;
        filter: drop-shadow(0 0 2px #ff3145);
        animation: bloodBind 2.1s ease-out forwards;
      }
      .fx-blood-lines circle {
        fill: #ff8790;
        stroke: #73131c;
        stroke-width: 0.8;
        animation: bloodHeart 1.75s ease-out forwards;
      }
      .fx-cloud-path {
        width: 12%;
        height: 8%;
        border-radius: 50%;
        background:
          radial-gradient(circle at 24% 60%, #f8ffff 0 24%, transparent 26%),
          radial-gradient(circle at 50% 38%, #c7f4ff 0 31%, transparent 33%),
          radial-gradient(circle at 78% 62%, #e9ffff 0 23%, transparent 25%);
        filter: drop-shadow(0 0 4px #65dafa);
        animation: cloudLift 1.6s ease-out var(--delay) both;
      }
      .fx-cloud-path:after {
        content: "";
        position: absolute;
        left: 45%;
        top: -65%;
        width: 10%;
        height: 100%;
        background: linear-gradient(transparent, #fff, transparent);
        opacity: 0.7;
      }
      .fx-general-descent {
        width: 17%;
        height: 21%;
        background: linear-gradient(
          90deg,
          #c32d2d 0 12%,
          transparent 14% 86%,
          #262f2e 88% 100%
        );
        clip-path: polygon(
          0 0,
          32% 8%,
          50% 0,
          68% 8%,
          100% 0,
          100% 78%,
          80% 66%,
          63% 86%,
          50% 70%,
          37% 86%,
          20% 66%,
          0 78%
        );
        filter: drop-shadow(0 0 6px #ffd675);
        animation: bannerDescent 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .fx-general-descent:after {
        content: "";
        position: absolute;
        left: 38%;
        right: 38%;
        top: 0;
        bottom: 8%;
        background: linear-gradient(#fff6c8, #d8aa54 65%, transparent);
        box-shadow: 0 0 8px #ffdf7e;
      }
      @keyframes hoofStamp {
        0% {
          opacity: 0;
          transform: translate(-50%, -120%) scale(1.6) rotate(-20deg);
        }
        42%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -42%) scale(1.3);
        }
      }
      @keyframes hoofDust {
        0% {
          opacity: 0;
          transform: scale(0.2);
        }
        45% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: scale(2);
        }
      }

      @keyframes drunkDrift {
        0% {
          opacity: 0;
          transform: translate(-80%, -35%) rotate(-18deg) scale(0.4);
        }
        35%,
        72% {
          opacity: 1;
          transform: translate(-50%, -55%) rotate(6deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-20%, -85%) rotate(-8deg) scale(1.35);
        }
      }
      @keyframes drunkBubble {
        0% {
          opacity: 0;
          transform: scale(0.2);
        }
        40% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translateY(-170%) scale(1.5);
        }
      }
      @keyframes lotusBloom {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(-120deg) scale(0.1);
        }
        42%,
        76% {
          opacity: 1;
          transform: translate(-50%, -50%) rotate(10deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -70%) rotate(80deg) scale(1.25);
        }
      }
      @keyframes tokenDrop {
        0% {
          opacity: 0;
          transform: translate(-50%, -170%) rotateY(90deg) scale(0.6);
        }
        38%,
        73% {
          opacity: 1;
          transform: translate(-50%, -50%) rotateY(0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -40%) rotateY(-70deg) scale(1.25);
        }
      }
      
      @keyframes cardSplit {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(0) scale(0.2);
        }
        35%,
        75% {
          opacity: 1;
          transform: translate(-145%, -60%) rotate(-24deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-210%, -80%) rotate(-42deg) scale(1.15);
        }
      }
      @keyframes cardSplitRight {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(0) scale(0.2);
        }
        35%,
        75% {
          opacity: 1;
          transform: translate(45%, -60%) rotate(24deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(110%, -80%) rotate(42deg) scale(1.15);
        }
      }
      @keyframes cardFlash {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1);
        }
        40% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2);
        }
      }
      @keyframes horseLinkDraw {
        0% {
          opacity: 0;
          stroke-dashoffset: 45;
        }
        30%,
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
        }
      }
      @keyframes horseNode {
        0% {
          opacity: 0;
          r: 0.2;
        }
        40%,
        72% {
          opacity: 1;
          r: 2.4;
        }
        100% {
          opacity: 0;
          r: 3.8;
        }
      }
      @keyframes fuseCurl {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(-180deg) scale(0.3);
        }
        35%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) rotate(0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(110deg) scale(1.25);
        }
      }
      @keyframes fuseSpark {
        50% {
          transform: scale(1.5);
          filter: brightness(1.8);
        }
      }
      @keyframes fortressBuild {
        0% {
          opacity: 0;
          transform: translate(-50%, 30%) scaleY(0.1);
        }
        40%,
        76% {
          opacity: 1;
          transform: translate(-50%, -55%) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -65%) scaleY(1.15);
        }
      }
      @keyframes imperialUnsheathe {
        0% {
          opacity: 0;
          transform: translate(-80%, -30%) rotate(-45deg) scale(0.5);
        }
        38%,
        72% {
          opacity: 1;
          transform: translate(-50%, -58%) rotate(0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-20%, -95%) rotate(18deg) scale(1.2);
        }
      }
      @keyframes bloodBind {
        0% {
          opacity: 0;
          stroke-dashoffset: 70;
        }
        30%,
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
          stroke-width: 1.2;
        }
      }
      @keyframes bloodHeart {
        0% {
          opacity: 0;
          r: 0.3;
        }
        40%,
        70% {
          opacity: 1;
          r: 2.8;
        }
        100% {
          opacity: 0;
          r: 4.3;
        }
      }
      @keyframes cloudLift {
        0% {
          opacity: 0;
          transform: translate(-50%, 10%) scale(0.3);
        }
        38%,
        72% {
          opacity: 1;
          transform: translate(-50%, -65%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -125%) scale(1.4);
        }
      }
      @keyframes bannerDescent {
        0% {
          opacity: 0;
          transform: translate(-50%, -160%) scaleX(0.3);
        }
        38%,
        74% {
          opacity: 1;
          transform: translate(-50%, -55%) scaleX(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -35%) scaleX(1.2);
        }
      }
      @media (max-width: 650px) {
        .fx-hoof-awaken,
        .fx-drunken-cloud,
        .fx-blue-lotus,
        .fx-golden-token,
        .fx-horse-links path,
        .fx-fuse-ignite,
        .fx-fortress-rise,
        .fx-imperial-sword,
        .fx-blood-lines path,
        .fx-cloud-path,
        .fx-general-descent {
          filter: none !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-hoof-awaken,
        .fx-drunken-cloud,
        .fx-blue-lotus,
        .fx-golden-token,
        .fx-creation-cards,
        .fx-creation-cards i,
        .fx-horse-links path,
        .fx-horse-links circle,
        .fx-fuse-ignite,
        .fx-fortress-rise,
        .fx-imperial-sword,
        .fx-blood-lines path,
        .fx-blood-lines circle,
        .fx-cloud-path,
        .fx-general-descent {
          animation-duration: 0.55s !important;
          animation-iteration-count: 1 !important;
        }
      }
    


      .board svg.fx-palace-constellation,
      .board svg.fx-flute-wave,
      .board svg.fx-imperial-line {
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 12;
        pointer-events: none;
        overflow: visible;
      }
      .fx-formation-flags {
        width: 16%;
        height: 19%;
        border-left: 3px solid #f4d191;
        border-right: 3px solid #f4d191;
        animation: flagsRise 1.8s ease-out forwards;
      }
      .fx-formation-flags:before,
      .fx-formation-flags:after {
        content: "";
        position: absolute;
        top: 4%;
        width: 46%;
        height: 35%;
        background: linear-gradient(135deg, #df4535, #7f1d20);
        clip-path: polygon(0 0, 100% 16%, 72% 52%, 100% 100%, 0 82%);
        filter: drop-shadow(0 0 4px #ff7a40);
      }
      .fx-formation-flags:before {
        left: 0;
      }
      .fx-formation-flags:after {
        right: 0;
        transform: scaleX(-1);
      }
      .fx-steppe-arrival {
        width: 17%;
        height: 18%;
        background: repeating-linear-gradient(
          68deg,
          transparent 0 16%,
          #f2dc9b 18% 21%,
          transparent 23% 34%
        );
        clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
        filter: drop-shadow(0 0 5px #d98637);
        animation: arrowRain 1.65s ease-out forwards;
      }
      .fx-steppe-arrival:after {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 5%;
        height: 20%;
        border-radius: 50%;
        background: radial-gradient(ellipse, #d19a5c99, transparent 70%);
      }
      .fx-peach-mist {
        width: 16%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, #ffd5df55, transparent 63%);
        animation: peachBloom 1.9s ease-out forwards;
      }
      .fx-peach-mist:before,
      .fx-peach-mist:after {
        content: "";
        position: absolute;
        left: 22%;
        top: 12%;
        width: 29%;
        height: 42%;
        border-radius: 70% 25% 70% 25%;
        background: linear-gradient(145deg, #fff0f4, #ef799b);
        box-shadow:
          32px 16px 0 -3px #f8a6ba,
          18px 42px 0 -5px #ffd6df;
        transform: rotate(-28deg);
        filter: drop-shadow(0 0 4px #f678a0);
      }
      .fx-peach-mist:after {
        left: 58%;
        top: 34%;
        transform: rotate(116deg) scale(0.75);
        box-shadow: none;
      }
      .fx-palace-constellation path {
        fill: #38546b22;
        stroke: #dffaff;
        stroke-width: 0.52;
        stroke-dasharray: 2 1;
        filter: drop-shadow(0 0 2px #4fdcff);
        animation: constellationDraw 2s ease-out forwards;
      }
      .fx-palace-constellation circle {
        fill: #fffad0;
        stroke: #43c9e0;
        stroke-width: 0.5;
        animation: starPulse 1.7s ease-out forwards;
      }
      .fx-tide-spiral {
        width: 16%;
        aspect-ratio: 1;
        border: 4px solid #8ceafa;
        border-left-color: transparent;
        border-radius: 50%;
        box-shadow:
          inset 0 0 0 5px #3dbfd144,
          0 0 9px #27d6e7;
        animation: tideSpin 1.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .fx-tide-spiral:after {
        content: "";
        position: absolute;
        inset: 20%;
        border: 3px solid #e8ffff;
        border-right-color: transparent;
        border-radius: 50%;
        animation: motion-counter-spin 0.55s linear 3;
      }
      .fx-reverse-footprints {
        width: 15%;
        height: 18%;
        background:
          radial-gradient(ellipse at 28% 28%, #e8dfc6 0 12%, transparent 14%),
          radial-gradient(ellipse at 68% 62%, #cbbf9f 0 13%, transparent 15%);
        animation: feetBack 1.75s ease-out forwards;
      }
      .fx-reverse-footprints:before,
      .fx-reverse-footprints:after {
        content: "";
        position: absolute;
        width: 16%;
        height: 13%;
        border-radius: 50%;
        background: #f5ecd2;
        box-shadow:
          -9px -7px 0 -3px #f5ecd2,
          8px -8px 0 -3px #f5ecd2;
      }
      .fx-reverse-footprints:before {
        left: 18%;
        top: 20%;
        transform: rotate(-25deg);
      }
      .fx-reverse-footprints:after {
        right: 17%;
        bottom: 18%;
        transform: rotate(155deg);
      }
      .fx-antler-sprout {
        width: 15%;
        height: 18%;
        border-left: 4px solid #f1d6a3;
        border-right: 4px solid #f1d6a3;
        border-radius: 48% 48% 0 0;
        filter: drop-shadow(0 0 5px #b77a35);
        animation: antlerGrow 1.8s ease-out forwards;
      }
      .fx-antler-sprout:before,
      .fx-antler-sprout:after {
        content: "";
        position: absolute;
        top: 4%;
        width: 35%;
        height: 48%;
        border-top: 4px solid #f7e3bb;
        border-left: 4px solid #f7e3bb;
        border-radius: 80% 0 0;
      }
      .fx-antler-sprout:before {
        left: -20%;
        transform: rotate(-35deg);
      }
      .fx-antler-sprout:after {
        right: -20%;
        transform: scaleX(-1) rotate(-35deg);
      }
      .fx-wool-puff {
        width: 15%;
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          radial-gradient(circle at 24% 44%, #fff 0 23%, transparent 25%),
          radial-gradient(circle at 50% 25%, #f6f2e5 0 27%, transparent 29%),
          radial-gradient(circle at 76% 47%, #fff 0 23%, transparent 25%),
          radial-gradient(circle at 48% 70%, #ddd8ca 0 29%, transparent 31%);
        filter: drop-shadow(0 0 5px #fff8dc);
        animation: woolPop 1.55s ease-out forwards;
      }
      .fx-tiger-claw {
        width: 16%;
        height: 18%;
        background: repeating-linear-gradient(
          112deg,
          transparent 0 18%,
          #fff0c1 20% 23%,
          #d55229 25% 29%,
          transparent 31% 40%
        );
        clip-path: polygon(
          0 0,
          100% 0,
          80% 100%,
          62% 56%,
          48% 100%,
          34% 55%,
          15% 100%
        );
        filter: drop-shadow(0 0 5px #ff5a2d);
        animation: clawSlash 1.45s cubic-bezier(0.15, 0.85, 0.2, 1) forwards;
      }
      .fx-flute-wave path {
        fill: none;
        stroke: #9ff4dc;
        stroke-width: 0.75;
        stroke-dasharray: 1.4 1.4;
        filter: drop-shadow(0 0 2px #23d49e);
        animation: fluteTravel 1.9s ease-out forwards;
      }
      .fx-flute-wave circle {
        fill: #fff1a5;
        stroke: #28b88d;
        stroke-width: 0.5;
        animation: fluteNode 1.6s ease-out forwards;
      }
      .fx-farewell-ribbons {
        width: 17%;
        height: 20%;
        background: conic-gradient(
          from 40deg,
          transparent 0 18%,
          #ef516755 20% 28%,
          transparent 30% 53%,
          #d7e6df66 55% 62%,
          transparent 64%
        );
        border-radius: 50%;
        animation: ribbonsPart 2.15s ease-out forwards;
      }
      .fx-farewell-ribbons:before,
      .fx-farewell-ribbons:after {
        content: "";
        position: absolute;
        left: 22%;
        top: -16%;
        width: 18%;
        height: 135%;
        border: 3px solid #f47687;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        transform: rotate(-23deg);
      }
      .fx-farewell-ribbons:after {
        left: auto;
        right: 22%;
        border-color: #e6eee9 transparent transparent #e6eee9;
        transform: rotate(23deg);
      }
      .fx-scale-armor {
        width: 15%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: repeating-radial-gradient(
          ellipse at 50% 105%,
          #c7fff1 0 9%,
          #319c83 10% 17%,
          transparent 18% 28%
        );
        filter: drop-shadow(0 0 6px #39e0b7);
        animation: scalesClose 1.75s ease-out forwards;
      }
      .fx-scale-armor:after {
        content: "";
        position: absolute;
        inset: 25%;
        border: 2px solid #e7fff7;
        transform: rotate(45deg);
        box-shadow: 0 0 7px #79efd2;
      }
      .fx-fortune-halo {
        background: radial-gradient(circle, #ffe69722 0 18%, transparent 45%);
        animation: motion-reveal-fade 2s ease-out forwards;
      }
      .fx-fortune-halo i {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 26%;
        aspect-ratio: 1;
        border: 2px solid #f6d56b;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(calc(0.45 + var(--i) * 0.35));
        box-shadow: 0 0 8px #ffd85e;
        animation: haloRing 1.55s ease-out forwards;
      }
      .fx-fortune-halo i:nth-child(1) {
        --i: 0;
      }
      .fx-fortune-halo i:nth-child(2) {
        --i: 1;
        animation-delay: 0.12s;
      }
      .fx-fortune-halo i:nth-child(3) {
        --i: 2;
        animation-delay: 0.24s;
      }
      .fx-open-gate {
        background: linear-gradient(
          90deg,
          #17241f66,
          transparent 30% 70%,
          #17241f66
        );
        animation: gateScene 2s ease-out forwards;
      }
      .fx-open-gate i {
        position: absolute;
        top: 29%;
        width: 22%;
        height: 45%;
        border: 4px solid #b48751;
        background: repeating-linear-gradient(
          90deg,
          #51331f 0 14%,
          #9c6840 15% 19%
        );
        box-shadow: 0 0 12px #2a1409;
        animation: gateLeft 1.8s ease-out forwards;
      }
      .fx-open-gate i:first-child {
        left: 28%;
        transform-origin: left;
      }
      .fx-open-gate i:nth-child(2) {
        right: 28%;
        transform-origin: right;
        animation-name: gateRight;
      }
      .fx-open-gate b {
        position: absolute;
        left: 50%;
        top: 51%;
        width: 7%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #ffe795;
        box-shadow: 0 0 18px 7px #ffcf4a;
        animation: gateLight 1.6s ease-out forwards;
      }
      .fx-flame-mane {
        width: 14%;
        height: 17%;
        background: conic-gradient(
          from 205deg at 50% 100%,
          transparent 0 9%,
          #ffdb52 10% 15%,
          #ff622e 17% 23%,
          transparent 25% 34%,
          #ffb43d 36% 42%,
          #ce291f 44% 50%,
          transparent 52%
        );
        clip-path: polygon(
          0 100%,
          8% 27%,
          31% 62%,
          46% 0,
          61% 59%,
          89% 20%,
          100% 100%
        );
        filter: drop-shadow(0 0 6px #ff542b);
        animation: maneFlare 1.65s ease-out forwards;
      }
      .fx-dare-eye {
        width: 16%;
        height: 10%;
        border-radius: 70% 10%;
        border: 3px solid #f3d5a0;
        background: radial-gradient(
          circle,
          #fff4b5 0 12%,
          #9b342b 15% 28%,
          #211313 31% 40%,
          transparent 43%
        );
        filter: drop-shadow(0 0 6px #e34332);
        animation: eyeOpen 1.8s ease-out forwards;
      }
      .fx-dare-eye:after {
        content: "";
        position: absolute;
        inset: -25%;
        border-top: 2px solid #ff7b58;
        border-radius: 50%;
        animation: motion-spin 0.75s linear 2;
      }
      .fx-imperial-line path {
        fill: none;
        stroke: #ffd766;
        stroke-width: 0.9;
        stroke-dasharray: 3 1;
        filter: drop-shadow(0 0 3px #ff9c29);
        animation: imperialBridge 2.1s ease-out forwards;
      }
      .fx-imperial-line circle {
        fill: #fff3a5;
        stroke: #9a531c;
        stroke-width: 0.6;
        animation: imperialNode 1.8s ease-out forwards;
      }
      .fx-elephant-sweep {
        width: 17%;
        aspect-ratio: 1;
        border: 6px solid #e7d6a8;
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        filter: drop-shadow(0 0 5px #9b7845);
        animation: tailSweep 1.7s ease-out forwards;
      }
      .fx-elephant-sweep:after {
        content: "";
        position: absolute;
        right: -12%;
        top: -11%;
        width: 19%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #fff0bf;
        box-shadow: 0 0 6px #d5a95d;
      }

      .fx-reaction-blades {
        width: 11%;
        aspect-ratio: 1;
        background:
          linear-gradient(
            45deg,
            transparent 42%,
            #fff6d4 44% 49%,
            #8fa7a5 51% 55%,
            transparent 57%
          ),
          linear-gradient(
            -45deg,
            transparent 42%,
            #fff6d4 44% 49%,
            #8fa7a5 51% 55%,
            transparent 57%
          );
        filter: drop-shadow(0 0 4px #f6c252);
        animation: bladeReady 1.35s ease-out var(--delay) both;
      }
      .fx-reaction-blades:after {
        content: "";
        position: absolute;
        inset: 32%;
        border: 2px solid #d9943b;
        border-radius: 50%;
      }
      @keyframes flagsRise {
        0% {
          opacity: 0;
          transform: translate(-50%, 20%) scaleY(0.1);
        }
        38%,
        75% {
          opacity: 1;
          transform: translate(-50%, -58%) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -85%) scaleY(1.15);
        }
      }
      @keyframes arrowRain {
        0% {
          opacity: 0;
          transform: translate(-85%, -130%) rotate(-12deg);
        }
        38%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(-25%, -5%) rotate(8deg);
        }
      }
      @keyframes peachBloom {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(-60deg);
        }
        40%,
        75% {
          opacity: 1;
          transform: translate(-50%, -55%) scale(1) rotate(10deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -90%) scale(1.45) rotate(80deg);
        }
      }
      @keyframes constellationDraw {
        0% {
          opacity: 0;
          stroke-dashoffset: 55;
        }
        30%,
        76% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
        }
      }
      @keyframes starPulse {
        0% {
          opacity: 0;
          r: 0.2;
        }
        42%,
        72% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          r: 3;
        }
      }
      @keyframes tideSpin {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2) rotate(-180deg);
        }
        40%,
        76% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(10deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.35) rotate(240deg);
        }
      }
      
      @keyframes feetBack {
        0% {
          opacity: 0;
          transform: translate(-10%, -10%) scale(0.3);
        }
        35%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-90%, -90%) scale(1.3);
        }
      }
      @keyframes antlerGrow {
        0% {
          opacity: 0;
          transform: translate(-50%, -10%) scaleY(0.05);
        }
        42%,
        76% {
          opacity: 1;
          transform: translate(-50%, -58%) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -80%) scale(1.25);
        }
      }
      @keyframes woolPop {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1);
        }
        42%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.15);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -75%) scale(1.8);
        }
      }
      @keyframes clawSlash {
        0% {
          opacity: 0;
          transform: translate(-95%, -95%) scale(1.6);
        }
        38%,
        70% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-15%, -10%) scale(1.3);
        }
      }
      @keyframes fluteTravel {
        0% {
          opacity: 0;
          stroke-dashoffset: 45;
        }
        30%,
        78% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: -20;
          stroke-width: 1.4;
        }
      }
      @keyframes fluteNode {
        0% {
          opacity: 0;
          r: 0.2;
        }
        45%,
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          r: 3;
        }
      }
      @keyframes ribbonsPart {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.25) rotate(45deg);
        }
        38%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -75%) scale(1.45) rotate(-35deg);
        }
      }
      @keyframes scalesClose {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2.1) rotate(-90deg);
        }
        40%,
        74% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.45) rotate(60deg);
        }
      }
      
      @keyframes haloRing {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1);
        }
        42%,
        72% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2);
        }
      }
      @keyframes gateScene {
        0% {
          opacity: 0;
        }
        22%,
        78% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes gateLeft {
        0% {
          transform: perspective(300px) rotateY(0);
        }
        45%,
        75% {
          transform: perspective(300px) rotateY(-68deg);
        }
        100% {
          transform: perspective(300px) rotateY(-88deg);
          opacity: 0;
        }
      }
      @keyframes gateRight {
        0% {
          transform: perspective(300px) rotateY(0);
        }
        45%,
        75% {
          transform: perspective(300px) rotateY(68deg);
        }
        100% {
          transform: perspective(300px) rotateY(88deg);
          opacity: 0;
        }
      }
      @keyframes gateLight {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1);
        }
        45%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(3);
        }
      }
      @keyframes maneFlare {
        0% {
          opacity: 0;
          transform: translate(-50%, -10%) scaleY(0.2);
        }
        38%,
        72% {
          opacity: 1;
          transform: translate(-50%, -62%) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -100%) scale(1.35);
        }
      }
      @keyframes eyeOpen {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleX(0.05);
        }
        38%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) scaleX(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleX(0.1);
        }
      }
      
      @keyframes imperialBridge {
        0% {
          opacity: 0;
          stroke-dashoffset: 70;
        }
        32%,
        76% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
          stroke-width: 1.5;
        }
      }
      @keyframes imperialNode {
        0% {
          opacity: 0;
          r: 0.2;
        }
        40%,
        73% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          r: 3.5;
        }
      }
      @keyframes tailSweep {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(-170deg) scale(0.3);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) rotate(10deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(130deg) scale(1.4);
        }
      }

      @keyframes bladeReady {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2) rotate(-90deg);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(0);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.6) rotate(80deg);
        }
      }
      @media (max-width: 650px) {
        .fx-formation-flags,
        .fx-steppe-arrival,
        .fx-peach-mist,
        .fx-palace-constellation path,
        .fx-tide-spiral,
        .fx-reverse-footprints,
        .fx-antler-sprout,
        .fx-wool-puff,
        .fx-tiger-claw,
        .fx-flute-wave path,
        .fx-farewell-ribbons,
        .fx-scale-armor,
        .fx-flame-mane,
        .fx-dare-eye,
        .fx-imperial-line path,
        .fx-elephant-sweep,
        .fx-reaction-blades {
          filter: none !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-formation-flags,
        .fx-steppe-arrival,
        .fx-peach-mist,
        .fx-palace-constellation path,
        .fx-palace-constellation circle,
        .fx-tide-spiral,
        .fx-reverse-footprints,
        .fx-antler-sprout,
        .fx-wool-puff,
        .fx-tiger-claw,
        .fx-flute-wave path,
        .fx-farewell-ribbons,
        .fx-scale-armor,
        .fx-fortune-halo,
        .fx-open-gate,
        .fx-flame-mane,
        .fx-dare-eye,
        .fx-imperial-line path,
        .fx-elephant-sweep,
        .fx-reaction-blades {
          animation-duration: 0.55s !important;
          animation-iteration-count: 1 !important;
        }
      }
    


      .board svg.fx-forced-retreat,
      .board svg.fx-pawn-relay {
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 12;
        pointer-events: none;
        overflow: visible;
      }
      .fx-river-gate {
        background: linear-gradient(
          0deg,
          transparent 42%,
          #5ad7e644 46%,
          #eaffff99 49%,
          #38bfd255 52%,
          transparent 58%
        );
        animation: riverGateScene 1.9s ease-out forwards;
      }
      .fx-river-gate i {
        position: absolute;
        top: 46%;
        width: 8%;
        height: 10%;
        border: 3px solid #eaffff;
        border-bottom: 0;
        border-radius: 50% 50% 0 0;
        box-shadow: 0 0 8px #35dcea;
        animation: riverArch 1.55s ease-out forwards;
      }
      .fx-river-gate i:first-child {
        left: 27%;
      }
      .fx-river-gate i:nth-child(2) {
        right: 27%;
        animation-delay: 0.12s;
      }
      .fx-guard-gate {
        width: 14%;
        aspect-ratio: 1;
        border: 4px solid #f2cf87;
        border-top-color: transparent;
        border-radius: 10% 10% 50% 50%;
        filter: drop-shadow(0 0 5px #cf7c2e);
        animation: guardGateOpen 1.7s ease-out forwards;
      }
      .fx-guard-gate:after {
        content: "";
        position: absolute;
        left: 50%;
        top: -18%;
        width: 3px;
        height: 135%;
        background: #fff0b7;
        transform: rotate(32deg);
        box-shadow: 0 0 4px #f5ad44;
      }
      .fx-relay-gears {
        width: 12%;
        aspect-ratio: 1;
        border: 4px dashed #d9e0d5;
        border-radius: 50%;
        box-shadow: 0 0 7px #71877f;
        animation: gearRelay 1.45s ease-out forwards;
      }
      .fx-relay-gears:after {
        content: "";
        position: absolute;
        inset: 27%;
        border: 3px solid #f2c773;
        border-radius: 50%;
        box-shadow: 0 0 5px #d5852c;
        animation: motion-counter-spin 0.55s linear 3;
      }
      .fx-double-echo {
        width: 13%;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 2px solid #7fe6df;
        box-shadow:
          0 0 0 7px #7fe6df33,
          0 0 10px #37b8b2;
        animation: doubleEcho 1.65s ease-out forwards;
      }
      .fx-double-echo:after {
        content: "";
        position: absolute;
        inset: -38%;
        border: 2px dashed #e5ffff;
        border-radius: 50%;
        animation: motion-spin 0.7s linear 2;
      }
      .fx-double-echo.king {
        border-color: #ffd76b;
        box-shadow:
          0 0 0 7px #ffd76b33,
          0 0 10px #e09b28;
      }
      .fx-double-echo.king:after {
        border-color: #fff1ae;
      }
      .fx-palace-break {
        width: 16%;
        aspect-ratio: 1;
        background: repeating-linear-gradient(
          45deg,
          transparent 0 20%,
          #f3d6a0 22% 24%,
          transparent 26% 42%
        );
        clip-path: polygon(
          0 10%,
          30% 0,
          50% 30%,
          70% 0,
          100% 10%,
          82% 45%,
          100% 72%,
          67% 66%,
          50% 100%,
          34% 65%,
          0 73%,
          19% 45%
        );
        filter: drop-shadow(0 0 5px #e2963c);
        animation: palaceCrack 1.65s ease-out forwards;
      }
      .fx-forced-retreat path {
        fill: none;
        stroke: #b7efff;
        stroke-width: 0.65;
        stroke-dasharray: 3 2;
        filter: drop-shadow(0 0 2px #2ec6ea);
        animation: retreatDraw 1.9s ease-out var(--delay) both;
      }
      .fx-forced-retreat circle {
        fill: #fff4be;
        stroke: #3daec6;
        stroke-width: 0.6;
        animation: retreatLand 1.45s ease-out var(--delay) both;
      }
      .fx-retreat-curtain {
        background: linear-gradient(0deg, #89d6e333, transparent 55%);
        animation: retreatCurtain 1.4s ease-out forwards;
      }
      .fx-battle-drums {
        background: radial-gradient(circle, #b9282722, transparent 35%);
        animation: motion-scene-fade 1.9s ease-out forwards;
      }
      .fx-battle-drums i {
        position: absolute;
        top: 42%;
        width: 18%;
        aspect-ratio: 1;
        border: 6px double #e8bd71;
        border-radius: 50%;
        background: radial-gradient(circle, #9d2925 0 48%, #4d1817 50%);
        box-shadow: 0 0 12px #d6402f;
        animation: drumBeat 0.46s ease-in-out 4;
      }
      .fx-battle-drums i:first-child {
        left: 23%;
      }
      .fx-battle-drums i:nth-child(2) {
        right: 23%;
        animation-delay: 0.12s;
      }
      .fx-strategy-map {
        background: linear-gradient(135deg, #d9c39922, transparent 60%);
        animation: mapScene 2s ease-out forwards;
      }
      .fx-strategy-map:before {
        content: "";
        position: absolute;
        inset: 22% 17%;
        border: 2px solid #dfc28c;
        background:
          repeating-linear-gradient(0deg, transparent 0 16%, #80633f55 17% 18%),
          repeating-linear-gradient(90deg, transparent 0 16%, #80633f55 17% 18%);
        transform: perspective(300px) rotateX(56deg);
        box-shadow: 0 0 12px #d6a452;
      }
      .fx-strategy-map i {
        position: absolute;
        width: 2%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #f0cb73;
        box-shadow: 0 0 5px #fff;
        left: calc(31% + var(--n) * 18%);
        top: 48%;
        animation: mapStone 1.5s ease-out both;
      }
      .fx-strategy-map i:nth-child(1) {
        --n: 0;
      }
      .fx-strategy-map i:nth-child(2) {
        --n: 1;
        animation-delay: 0.12s;
      }
      .fx-strategy-map i:nth-child(3) {
        --n: 2;
        animation-delay: 0.24s;
      }

      .fx-pawn-relay path {
        fill: none;
        stroke: #f2ce76;
        stroke-width: 0.7;
        stroke-dasharray: 2 2;
        filter: drop-shadow(0 0 2px #ca7b2c);
        animation: relayLine 1.8s ease-out forwards;
      }
      .fx-pawn-relay circle {
        fill: #fff0ad;
        stroke: #b75b2b;
        stroke-width: 0.5;
        animation: relayNode 1.6s ease-out forwards;
      }
      .fx-mountain-return {
        width: 17%;
        height: 16%;
        background: linear-gradient(
          145deg,
          transparent 0 22%,
          #4a6e5c 24% 46%,
          #9bb68f 48% 54%,
          #355445 56% 78%,
          transparent 80%
        );
        clip-path: polygon(
          0 100%,
          22% 44%,
          36% 68%,
          58% 0,
          72% 56%,
          84% 37%,
          100% 100%
        );
        filter: drop-shadow(0 0 6px #7fc09f);
        animation: mountainRise 1.9s ease-out forwards;
      }
      .fx-mountain-return:after {
        content: "";
        position: absolute;
        left: 44%;
        top: 3%;
        width: 25%;
        height: 21%;
        background: #efffe4;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
      }
      .fx-mountain-dormant {
        background: linear-gradient(0deg, #45604c22, transparent 38%);
        animation: dormantScene 1.55s ease-out forwards;
      }
      .fx-mountain-dormant i {
        position: absolute;
        left: 37%;
        right: 37%;
        bottom: 18%;
        height: 27%;
        background: #445b4a;
        clip-path: polygon(0 100%, 30% 39%, 47% 66%, 67% 0, 100% 100%);
        filter: drop-shadow(0 0 5px #84ad86);
      }
      .fx-reverse-arrows {
        width: 10%;
        height: 15%;
        background: linear-gradient(#fff1a8 0 62%, transparent 64%);
        clip-path: polygon(
          42% 0,
          58% 0,
          58% 58%,
          82% 58%,
          50% 100%,
          18% 58%,
          42% 58%
        );
        filter: drop-shadow(0 0 4px #e49b2c);
        animation: reverseArrow 1.4s ease-out forwards;
      }
      .fx-momentum-compass {
        background: radial-gradient(circle, #82e1ff22, transparent 31%);
        animation: motion-reveal-fade 1.9s ease-out forwards;
      }
      .fx-momentum-compass i {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24%;
        aspect-ratio: 1;
        border: 2px solid #a7efff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 9px #48cce6;
        animation: compassSpin 1.5s ease-out forwards;
      }
      .fx-momentum-compass i:after {
        content: "";
        position: absolute;
        left: 42%;
        top: -18%;
        width: 16%;
        height: 136%;
        background: linear-gradient(#fff, transparent 44% 56%, #47c5df);
        clip-path: polygon(
          50% 0,
          100% 43%,
          62% 43%,
          62% 100%,
          38% 100%,
          38% 43%,
          0 43%
        );
      }
      .fx-momentum-compass i:nth-child(2) {
        width: 14%;
        animation-direction: reverse;
      }
      .fx-commander-step {
        width: 15%;
        height: 18%;
        background: linear-gradient(
          90deg,
          transparent 44%,
          #f7de9b 46% 53%,
          transparent 55%
        );
        animation: commandStride 1.7s ease-out forwards;
      }
      .fx-commander-step:before {
        content: "";
        position: absolute;
        left: 47%;
        top: 4%;
        width: 44%;
        height: 39%;
        background: #c83532;
        clip-path: polygon(0 0, 100% 20%, 70% 55%, 100% 100%, 0 80%);
        filter: drop-shadow(0 0 4px #e36a3f);
      }
      .fx-commander-step:after {
        content: "";
        position: absolute;
        left: 22%;
        bottom: 0;
        width: 24%;
        height: 18%;
        border-radius: 50%;
        background: #fff0bd;
        box-shadow: 25px -10px 0 -3px #e0ad62;
      }
      .fx-keima-forge {
        width: 14%;
        aspect-ratio: 1;
        border: 3px solid #c5f0df;
        border-radius: 50%;
        background: conic-gradient(
          from 20deg,
          transparent 0 17%,
          #eefcf5 19% 23%,
          transparent 25% 46%,
          #65b99d 48% 54%,
          transparent 56%
        );
        filter: drop-shadow(0 0 5px #4bd0a7);
        animation: keimaTurn 1.65s ease-out forwards;
      }
      .fx-keima-forge:after {
        content: "";
        position: absolute;
        left: 27%;
        top: 18%;
        width: 46%;
        height: 56%;
        border: 3px solid #e7fff6;
        border-left-color: transparent;
        border-bottom-color: transparent;
        transform: rotate(45deg);
      }
      .fx-lance-forge {
        width: 15%;
        height: 19%;
        background: linear-gradient(
          90deg,
          transparent 46%,
          #f5f7e9 48% 51%,
          #7eb4a4 53% 56%,
          transparent 58%
        );
        filter: drop-shadow(0 0 5px #64d2b6);
        animation: lanceRise 1.7s ease-out forwards;
      }
      .fx-lance-forge:before {
        content: "";
        position: absolute;
        left: 36%;
        top: 0;
        width: 28%;
        height: 32%;
        background: #e9fff7;
        clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%);
      }
      .fx-lance-forge:after {
        content: "";
        position: absolute;
        left: 31%;
        right: 31%;
        bottom: 8%;
        height: 8%;
        background: #d6a85d;
        box-shadow: 0 0 4px #fff0a7;
      }
      @keyframes riverGateScene {
        0% {
          opacity: 0;
          transform: scaleY(0.1);
        }
        30%,
        75% {
          opacity: 1;
          transform: scaleY(1);
        }
        100% {
          opacity: 0;
          transform: scaleY(1.4);
        }
      }
      @keyframes riverArch {
        0% {
          opacity: 0;
          transform: translateY(80%) scaleX(0.2);
        }
        40%,
        72% {
          opacity: 1;
          transform: translateY(0) scaleX(1);
        }
        100% {
          opacity: 0;
          transform: translateY(-40%) scaleX(1.3);
        }
      }
      @keyframes guardGateOpen {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotateY(90deg) scale(0.3);
        }
        38%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) rotateY(0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotateY(-80deg) scale(1.2);
        }
      }
      @keyframes gearRelay {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(-160deg) scale(0.3);
        }
        38%,
        73% {
          opacity: 1;
          transform: translate(-50%, -50%) rotate(40deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(220deg) scale(1.2);
        }
      }
      
      @keyframes doubleEcho {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.15);
        }
        35%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.8);
        }
      }
      
      @keyframes palaceCrack {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.6) rotate(25deg);
        }
      }
      @keyframes retreatDraw {
        0% {
          opacity: 0;
          stroke-dashoffset: 55;
        }
        30%,
        77% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: 0;
        }
      }
      @keyframes retreatLand {
        0% {
          opacity: 0;
          r: 0.2;
        }
        45%,
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          r: 3.2;
        }
      }
      @keyframes retreatCurtain {
        0% {
          opacity: 0;
        }
        30%,
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      
      @keyframes drumBeat {
        0%,
        100% {
          transform: scale(0.85);
        }
        50% {
          transform: scale(1.15);
          filter: brightness(1.5);
        }
      }
      @keyframes mapScene {
        0% {
          opacity: 0;
          transform: scale(0.7);
        }
        30%,
        75% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.15);
        }
      }
      @keyframes mapStone {
        0% {
          opacity: 0;
          transform: translateY(-500%) scale(0.3);
        }
        45%,
        75% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
        100% {
          opacity: 0;
          transform: translateY(30%) scale(1.4);
        }
      }
      @keyframes hoofGuard {
        0% {
          opacity: 0;
          transform: translate(-50%, -90%) scale(1.5);
        }
        40%,
        74% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -35%) scale(1.25);
        }
      }

      @keyframes relayLine {
        0% {
          opacity: 0;
          stroke-dashoffset: 55;
        }
        30%,
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          stroke-dashoffset: -20;
        }
      }
      @keyframes relayNode {
        0% {
          opacity: 0;
          r: 0.2;
        }
        40%,
        72% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          r: 2.8;
        }
      }
      @keyframes mountainRise {
        0% {
          opacity: 0;
          transform: translate(-50%, 20%) scaleY(0.1);
        }
        38%,
        75% {
          opacity: 1;
          transform: translate(-50%, -55%) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -75%) scale(1.25);
        }
      }
      @keyframes dormantScene {
        0% {
          opacity: 0;
        }
        30%,
        70% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes reverseArrow {
        0% {
          opacity: 0;
          transform: translate(-50%, -120%) scale(0.4);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -30%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, 20%) scale(1.2);
        }
      }
      
      @keyframes compassSpin {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(-150deg) scale(0.3);
        }
        40%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) rotate(20deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(170deg) scale(1.3);
        }
      }
      @keyframes commandStride {
        0% {
          opacity: 0;
          transform: translate(-80%, -15%) scale(0.4);
        }
        38%,
        74% {
          opacity: 1;
          transform: translate(-50%, -55%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-20%, -95%) scale(1.2);
        }
      }
      @keyframes keimaTurn {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(-120deg) scale(0.2);
        }
        40%,
        75% {
          opacity: 1;
          transform: translate(-50%, -50%) rotate(20deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(130deg) scale(1.3);
        }
      }
      @keyframes lanceRise {
        0% {
          opacity: 0;
          transform: translate(-50%, 10%) scaleY(0.1);
        }
        38%,
        74% {
          opacity: 1;
          transform: translate(-50%, -60%) scaleY(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -110%) scale(1.2);
        }
      }
      @media (max-width: 650px) {
        .fx-river-gate,
        .fx-guard-gate,
        .fx-relay-gears,
        .fx-double-echo,
        .fx-palace-break,
        .fx-forced-retreat path,
        .fx-battle-drums i,
        .fx-strategy-map,
        .fx-pawn-relay path,
        .fx-mountain-return,
        .fx-reverse-arrows,
        .fx-momentum-compass,
        .fx-commander-step,
        .fx-keima-forge,
        .fx-lance-forge {
          filter: none !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-river-gate,
        .fx-guard-gate,
        .fx-relay-gears,
        .fx-double-echo,
        .fx-palace-break,
        .fx-forced-retreat path,
        .fx-battle-drums,
        .fx-strategy-map,
        .fx-pawn-relay path,
        .fx-mountain-return,
        .fx-mountain-dormant,
        .fx-reverse-arrows,
        .fx-momentum-compass,
        .fx-commander-step,
        .fx-keima-forge,
        .fx-lance-forge {
          animation-duration: 0.55s !important;
          animation-iteration-count: 1 !important;
        }
      }
    


      .fx-strategy-bonus {
        background: radial-gradient(circle, #79d8c833, transparent 30%);
        animation: bonusScene 1.7s ease-out forwards;
      }
      .fx-strategy-bonus i {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 11%;
        height: 18%;
        border: 2px solid #d9fff1;
        border-radius: 7%;
        background: linear-gradient(145deg, #ebfff8, #458877 58%, #173e35);
        box-shadow: 0 0 10px #54e1bb;
        animation: bonusCardLeft 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .fx-strategy-bonus i:nth-child(2) {
        animation-name: bonusCardRight;
      }
      .fx-royal-sacrifice {
        width: 15%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: conic-gradient(
          from 20deg,
          transparent 0 12%,
          #e8cf8c 14% 17%,
          transparent 19% 32%,
          #bd3434 34% 39%,
          transparent 41% 60%,
          #fff1b2 62% 65%,
          transparent 67%
        );
        filter: drop-shadow(0 0 6px #cf4838);
        animation: sacrificePetals 1.85s ease-out forwards;
      }
      .fx-royal-sacrifice:after {
        content: "";
        position: absolute;
        left: 47%;
        top: 4%;
        width: 6%;
        height: 92%;
        background: linear-gradient(transparent, #fff0b7 20% 80%, transparent);
        transform: rotate(45deg);
        box-shadow: 0 0 5px #fff;
      }
      .fx-bravery-milestone {
        width: 16%;
        aspect-ratio: 1;
        border: 5px double #ffb04c;
        border-radius: 50%;
        box-shadow:
          inset 0 0 0 8px #b82d2033,
          0 0 12px #ff3e25;
        animation: braveryBurst 1.7s cubic-bezier(0.15, 0.85, 0.2, 1) forwards;
      }
      .fx-bravery-milestone:before,
      .fx-bravery-milestone:after {
        content: "";
        position: absolute;
        left: -30%;
        right: -30%;
        top: 47%;
        height: 6%;
        background: linear-gradient(
          90deg,
          transparent,
          #fff0a5 18% 82%,
          transparent
        );
      }
      .fx-bravery-milestone:after {
        transform: rotate(90deg);
      }
      .fx-empty-fort-sweep {
        width: 17%;
        height: 12%;
        background: repeating-linear-gradient(
          100deg,
          transparent 0 13%,
          #e8fff6 15% 18%,
          transparent 20% 31%
        );
        filter: drop-shadow(0 0 5px #65d6c2);
        animation: fortWind 1.45s ease-out forwards;
      }
      .fx-empty-fort-sweep:after {
        content: "";
        position: absolute;
        left: 5%;
        right: 5%;
        bottom: 4%;
        height: 3px;
        background: #fff4c4;
        box-shadow: 0 0 6px #75e2ce;
      }
      .fx-dare-triggered {
        width: 17%;
        height: 10%;
        border-radius: 70% 10%;
        background: radial-gradient(
          circle,
          #fff 0 10%,
          #ffcf51 12% 25%,
          #c52825 28% 38%,
          transparent 41%
        );
        border: 3px solid #ff7952;
        filter: drop-shadow(0 0 9px #ff3428);
        animation: dareFlash 1.45s ease-out forwards;
      }
      .fx-dare-triggered:after {
        content: "";
        position: absolute;
        inset: -40%;
        border: 2px dashed #ffd281;
        border-radius: 50%;
        animation: motion-spin 0.45s linear 3;
      }
      .fx-fortune-trigger {
        width: 17%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: conic-gradient(
          from 18deg,
          #fff0a2 0 7%,
          transparent 8% 19%,
          #f4bd3d 20% 27%,
          transparent 28% 41%,
          #fff0a2 42% 49%,
          transparent 50% 63%,
          #f4bd3d 64% 71%,
          transparent 72%
        );
        filter: drop-shadow(0 0 7px #ffc93e);
        animation: fortuneOpen 1.7s ease-out forwards;
      }
      .fx-fortune-trigger:after {
        content: "";
        position: absolute;
        inset: 27%;
        border: 2px solid #fff7c8;
        border-radius: 50%;
        box-shadow: 0 0 8px #fff;
      }
      .fx-farewell-call {
        width: 18%;
        height: 20%;
        background: linear-gradient(
          120deg,
          transparent 0 28%,
          #f0677b88 30% 38%,
          transparent 40% 58%,
          #d9eee688 60% 68%,
          transparent 70%
        );
        filter: drop-shadow(0 0 5px #f2879b);
        animation: farewellSignal 1.9s ease-out forwards;
      }
      .fx-farewell-call:before,
      .fx-farewell-call:after {
        content: "";
        position: absolute;
        bottom: 8%;
        width: 23%;
        height: 48%;
        border-radius: 50% 50% 15% 15%;
        background: linear-gradient(#fff0e4, #b84759);
        opacity: 0.85;
      }
      .fx-farewell-call:before {
        left: 23%;
      }
      .fx-farewell-call:after {
        right: 23%;
        background: linear-gradient(#effff9, #688d81);
      }
      @keyframes bonusScene {
        0% {
          opacity: 0;
        }
        25%,
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes bonusCardLeft {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        42%,
        75% {
          opacity: 1;
          transform: translate(-135%, -50%) rotate(-18deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-190%, -80%) rotate(-32deg) scale(1.2);
        }
      }
      @keyframes bonusCardRight {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2);
        }
        42%,
        75% {
          opacity: 1;
          transform: translate(35%, -50%) rotate(18deg) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(90%, -80%) rotate(32deg) scale(1.2);
        }
      }
      @keyframes sacrificePetals {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(-90deg);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(10deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -80%) scale(1.7) rotate(150deg);
        }
      }
      @keyframes braveryBurst {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.1);
        }
        38%,
        68% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1.15);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(2);
        }
      }
      @keyframes fortWind {
        0% {
          opacity: 0;
          transform: translate(-120%, -50%) skewX(-20deg);
        }
        40%,
        72% {
          opacity: 1;
          transform: translate(-50%, -50%) skewX(-8deg);
        }
        100% {
          opacity: 0;
          transform: translate(40%, -50%) skewX(15deg);
        }
      }
      @keyframes dareFlash {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleX(0.05);
        }
        35%,
        68% {
          opacity: 1;
          transform: translate(-50%, -50%) scaleX(1.2);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scaleX(0.2);
        }
      }
      
      @keyframes fortuneOpen {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.2) rotate(-120deg);
        }
        40%,
        74% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1) rotate(20deg);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.5) rotate(160deg);
        }
      }
      @keyframes farewellSignal {
        0% {
          opacity: 0;
          transform: translate(-50%, -25%) scale(0.3);
        }
        38%,
        74% {
          opacity: 1;
          transform: translate(-50%, -55%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -105%) scale(1.25);
        }
      }
      @media (max-width: 650px) {
        .fx-royal-sacrifice,
        .fx-bravery-milestone,
        .fx-empty-fort-sweep,
        .fx-dare-triggered,
        .fx-fortune-trigger,
        .fx-farewell-call {
          filter: none !important;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-strategy-bonus,
        .fx-royal-sacrifice,
        .fx-bravery-milestone,
        .fx-empty-fort-sweep,
        .fx-dare-triggered,
        .fx-fortune-trigger,
        .fx-farewell-call {
          animation-duration: 0.55s !important;
          animation-iteration-count: 1 !important;
        }
      }
      /* 玄墨朱砂主题：页面背景与功能面板使用中性暖色，棋盘本身保持木色。 */
      :root {
        --bg: #0d0b0c;
        --panel: #1c1716;
        --panel-2: #241c19;
        --line: #806044;
        --muted: #aaa09a;
        --gold: #e5bb70;
      }
      html {
        background: #090809;
      }
      body {
        background:
          radial-gradient(circle at 12% 16%, #68272055 0, transparent 32%),
          radial-gradient(circle at 86% 10%, #9a6b2d24 0, transparent 29%),
          radial-gradient(ellipse at 58% 88%, #4d202033 0, transparent 42%),
          linear-gradient(145deg, #171112 0%, #09090a 52%, #170f0e 100%);
      }
      body:before {
        opacity: 0.42;
        background-image:
          linear-gradient(
            120deg,
            transparent 0 47%,
            #d5a85d0b 48%,
            transparent 49% 100%
          ),
          radial-gradient(circle, #fff7e50a 0 1px, transparent 1.5px);
        background-size:
          240px 240px,
          7px 7px;
        mix-blend-mode: normal;
      }
      body:after {
        content: "棋逢　　　　对手";
        left: -2vw;
        bottom: -5vh;
        color: #a4423730;
        text-shadow: 0 0 44px #d7a24b10;
        transform: rotate(-5deg);
      }
      .top {
        border-bottom-color: #d3a35a2b;
        background: linear-gradient(180deg, #160f10b8, transparent);
      }
      .waiting,
      .panel,
      .board-wrap {
        border-color: #d7aa6530;
        background: linear-gradient(145deg, #241c1aef, #120f10f7);
        box-shadow:
          0 18px 48px #0008,
          inset 0 1px #f3d79e10;
      }
      .status,
      .chat-box {
        background: #0c0a0be6;
        border-color: #c6924f26;
      }
      .seat {
        border-color: #d7aa6526;
        background: #b9763510;
      }
      .skill,
.logs div {
        border-color: #d7aa6517;
      }
      .card {
        border-color: #d6a75d40;
        background: linear-gradient(145deg, #281e1beb, #110e0ff5);
      }
      .card input,
      .chat-send input {
        background: #0b090ae8;
        border-color: #d7aa652c;
      }
      .card input:focus,
      .chat-send input:focus {
        border-color: #d7aa65;
        box-shadow: 0 0 0 3px #c8443226;
      }
      .mode-card {
        border-color: #d7aa652c;
        background: linear-gradient(145deg, #2a201d, #151112);
      }
      .mode-card:hover {
        border-color: #e0b36eaa;
        background: linear-gradient(145deg, #38251f, #1c1414);
      }
      .btn {
        border-color: #8d6c4d;
        background: #2a211e;
        color: #f1e8dd;
      }
      .btn:hover {
        background: #3a2a25;
      }
      .room-actions > .btn {
        background: #251b1a99;
        border-color: #d7aa652c;
      }
      .room-actions > .btn:hover {
        background: #9f3e2b28;
        border-color: #d9ac65a0;
      }
      .chat-dock .chat-panel {
        background: #1a1414f2;
        border-color: #d5a55c66;
      }
      .modal > div {
        border-color: #d0a45c66;
        background: linear-gradient(145deg, #251b19, #100d0e);
      }
      .theme-select {
        max-width: 128px;
        padding: 8px 28px 8px 11px;
        border: 1px solid #ffffff1f;
        border-radius: 999px;
        background: #171315;
        color: #eadfcf;
        font:
          12px "Microsoft YaHei",
          sans-serif;
        outline: none;
        cursor: pointer;
      }
      .theme-select:focus {
        border-color: #d7aa65;
      }
      .theme-select option {
        background: #171315;
        color: #eadfcf;
      }
      #emControls {
        display: flex;
        gap: 7px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .em-toolbar {
        margin: 0 0 10px;
        padding: 10px;
        border: 1px solid #dfb56555;
        border-radius: 11px;
        background: #080b0ad9;
        box-shadow: inset 0 0 18px #d8a85210;
      }
      .em-toolbar:empty {
        display: none;
      }
      .em-toolbar .btn {
        padding: 7px 11px;
      }
      .ink-lines {
        position: absolute;
        inset: 5%;
        width: 90%;
        height: 90%;
        z-index: 2;
        pointer-events: none;
        overflow: visible;
      }
      .ink-line-shadow {
        stroke: #0a0507;
        stroke-width: 2.4;
        stroke-linecap: round;
        filter: drop-shadow(0 0 2px #000);
      }
      .ink-line-main {
        stroke: #2a1722;
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-dasharray: 1.3 0.32;
      }
      .ink-endpoint {
        fill: #120b10;
        stroke: #a56b7c;
        stroke-width: 0.42;
      }
      .ink-draft-line {
        stroke: #f0bc69;
        stroke-width: 1.25;
        stroke-dasharray: 2 1;
        filter: drop-shadow(0 0 2px #fff0a8);
      }
      .ink-draft-point {
        fill: #fff0a8;
        stroke: #8d542a;
        stroke-width: 0.45;
      }
      .target.ink-capture {
        background: #201018;
        border: 2px solid #e06b83;
        box-shadow: 0 0 13px #e34267;
      }
      body[data-theme="blue"] {
        background:
          radial-gradient(circle at 14% 14%, #244c7455 0, transparent 34%),
          radial-gradient(circle at 83% 12%, #4d8ea533 0, transparent 29%),
          radial-gradient(ellipse at 55% 88%, #172f5944 0, transparent 42%),
          linear-gradient(145deg, #111927 0%, #070a10 54%, #101d2c 100%);
      }
      body[data-theme="blue"]:before {
        background-image:
          linear-gradient(
            120deg,
            transparent 0 47%,
            #8fc9e50c 48%,
            transparent 49% 100%
          ),
          radial-gradient(circle, #dff7ff0d 0 1px, transparent 1.5px);
      }
      body[data-theme="blue"]:after {
        content: "月落　　　　星河";
        color: #5799c52b;
        text-shadow: 0 0 44px #72c8e41c;
      }
      body[data-theme="blue"] .top {
        border-bottom-color: #77bcd32b;
        background: linear-gradient(180deg, #0c1725c4, transparent);
      }
      body[data-theme="blue"] .waiting,
      body[data-theme="blue"] .panel,
      body[data-theme="blue"] .board-wrap {
        border-color: #83c6dd30;
        background: linear-gradient(145deg, #192432ef, #0c111bf7);
      }
      body[data-theme="blue"] .status,
      body[data-theme="blue"] .chat-box {
        background: #070b12e8;
        border-color: #7cc6df2b;
      }
      body[data-theme="blue"] .card,
      body[data-theme="blue"] .modal > div {
        border-color: #7cc6df3d;
        background: linear-gradient(145deg, #1a2938ef, #090e17f7);
      }
      body[data-theme="blue"] .mode-card {
        border-color: #7cc6df28;
        background: linear-gradient(145deg, #1a2a3a, #0d1420);
      }
      body[data-theme="blue"] .mode-card:hover {
        border-color: #83cfe2aa;
        background: linear-gradient(145deg, #223b52, #111d2c);
      }
      body[data-theme="blue"] .btn,
      body[data-theme="blue"] .room-actions > .btn {
        border-color: #668da5;
        background: #182633;
        color: #e7f1f5;
      }
      body[data-theme="blue"] .btn:hover,
      body[data-theme="blue"] .room-actions > .btn:hover {
        background: #22394b;
        border-color: #83c9df;
      }
      body[data-theme="blue"] .chat-dock .chat-panel {
        background: #111b28f2;
        border-color: #79bdd166;
      }
      body[data-theme="violet"] {
        background:
          radial-gradient(circle at 13% 13%, #5d39705c 0, transparent 33%),
          radial-gradient(circle at 84% 13%, #a06c9c2d 0, transparent 29%),
          radial-gradient(ellipse at 55% 88%, #3420524a 0, transparent 42%),
          linear-gradient(145deg, #1a1322 0%, #09080d 54%, #1a1020 100%);
      }
      body[data-theme="violet"]:before {
        background-image:
          linear-gradient(
            120deg,
            transparent 0 47%,
            #d6a6e00c 48%,
            transparent 49% 100%
          ),
          radial-gradient(circle, #fff0ff0d 0 1px, transparent 1.5px);
      }
      body[data-theme="violet"]:after {
        content: "紫微　　　　入局";
        color: #a36aae29;
        text-shadow: 0 0 44px #cb88db18;
      }
      body[data-theme="violet"] .top {
        border-bottom-color: #c395cf29;
        background: linear-gradient(180deg, #1b1022c2, transparent);
      }
      body[data-theme="violet"] .waiting,
      body[data-theme="violet"] .panel,
      body[data-theme="violet"] .board-wrap {
        border-color: #c792d230;
        background: linear-gradient(145deg, #261d2def, #100d16f7);
      }
      body[data-theme="violet"] .status,
      body[data-theme="violet"] .chat-box {
        background: #0b0910e8;
        border-color: #c18dce29;
      }
      body[data-theme="violet"] .card,
      body[data-theme="violet"] .modal > div {
        border-color: #c792d23d;
        background: linear-gradient(145deg, #2a2032ef, #0e0b14f7);
      }
      body[data-theme="violet"] .mode-card {
        border-color: #c792d228;
        background: linear-gradient(145deg, #2c2133, #14101b);
      }
      body[data-theme="violet"] .mode-card:hover {
        border-color: #d2a0dcaa;
        background: linear-gradient(145deg, #3a2945, #1e1527);
      }
      body[data-theme="violet"] .btn,
      body[data-theme="violet"] .room-actions > .btn {
        border-color: #856c91;
        background: #28202e;
        color: #f0e8f2;
      }
      body[data-theme="violet"] .btn:hover,
      body[data-theme="violet"] .room-actions > .btn:hover {
        background: #392b42;
        border-color: #c797d1;
      }
      body[data-theme="violet"] .chat-dock .chat-panel {
        background: #1d1725f2;
        border-color: #bf91ca66;
      }
      body[data-theme="gold"] {
        background:
          radial-gradient(circle at 15% 15%, #7b592c4d 0, transparent 34%),
          radial-gradient(circle at 83% 10%, #c2924230 0, transparent 28%),
          radial-gradient(ellipse at 55% 88%, #563a2140 0, transparent 43%),
          linear-gradient(145deg, #201a12 0%, #0b0a08 54%, #1d160d 100%);
      }
      body[data-theme="gold"]:before {
        background-image:
          linear-gradient(
            120deg,
            transparent 0 47%,
            #f0c56f10 48%,
            transparent 49% 100%
          ),
          radial-gradient(circle, #fff0c40d 0 1px, transparent 1.5px);
      }
      body[data-theme="gold"]:after {
        content: "金戈　　　　残局";
        color: #c7953b27;
        text-shadow: 0 0 44px #e4b35b19;
      }
      body[data-theme="gold"] .top {
        border-bottom-color: #d5aa602e;
        background: linear-gradient(180deg, #21190ec0, transparent);
      }
      body[data-theme="gold"] .waiting,
      body[data-theme="gold"] .panel,
      body[data-theme="gold"] .board-wrap {
        border-color: #d9ae6335;
        background: linear-gradient(145deg, #292218ef, #11100cf7);
      }
      body[data-theme="gold"] .status,
      body[data-theme="gold"] .chat-box {
        background: #0d0c09e8;
        border-color: #d2a45a2d;
      }
      body[data-theme="gold"] .card,
      body[data-theme="gold"] .modal > div {
        border-color: #d8ad613f;
        background: linear-gradient(145deg, #2e261aef, #100e0af7);
      }
      body[data-theme="gold"] .mode-card {
        border-color: #d8ad612d;
        background: linear-gradient(145deg, #30281b, #17130e);
      }
      body[data-theme="gold"] .mode-card:hover {
        border-color: #e5bd74aa;
        background: linear-gradient(145deg, #40331f, #211a11);
      }
      body[data-theme="gold"] .btn,
      body[data-theme="gold"] .room-actions > .btn {
        border-color: #8f744d;
        background: #2d271e;
        color: #f2eadb;
      }
      body[data-theme="gold"] .btn:hover,
      body[data-theme="gold"] .room-actions > .btn:hover {
        background: #403522;
        border-color: #dbb66f;
      }
      body[data-theme="gold"] .chat-dock .chat-panel {
        background: #211c14f2;
        border-color: #d7ad6466;
      }
      @media (max-width: 650px) {
        .theme-select {
          max-width: 112px;
          padding: 7px 24px 7px 9px;
        }
      }
    


      .fx50-overlay text.fx50-zone-label {
        font-size: 2.7px;
      }
      .novel-status {
        font-size: 13px;
        line-height: 1.7;
      }
      .ink-lines .ink-line-main {
        stroke-dasharray: none;
        stroke-width: 1.15;
      }
      .ink-lines .ink-line-shadow {
        stroke: #fff8ce;
        stroke-width: 1.65;
        opacity: 0.6;
        filter: none;
      }
      .ink-lines .ink-endpoint {
        stroke: #fff7cc;
        stroke-width: 0.3;
      }
      .ink-lines .ink-draft-line {
        stroke: #53eafa;
        filter: none;
      }
      @media (max-width: 700px) {
        .game,
        .board-wrap {
          min-width: 0;
        }
        .board-wrap {
          overflow: visible;
        }
        .board-wrap .board {
          width: 100%;
          max-width: 100%;
          min-width: 0;
        }
      }
    


      .em-toolbar:empty {
        display: none;
      }
      .piece.dual-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        line-height: 1.05;
        background: linear-gradient(125deg, #ffe7aa 0 68%, #b8e5fa 69%);
        border-color: #fff0b5;
        box-shadow: 0 0 0 1px #39bde5;
      }
      .piece.dual-form {
        container-type: inline-size;
      }
      .piece.dual-form .form-now {
        font-size: 40cqw;
        font-weight: 900;
        white-space: nowrap;
      }
      .piece.dual-form.long-name .form-now {
        font-size: 28cqw;
      }
      .piece.dual-form .form-other {
        font: 700 clamp(6px, 18cqw, 11px) / 1.3 sans-serif;
        color: #145177;
        background: #c3eefa;
        border-radius: 3px;
        padding: 0 1px;
        white-space: nowrap;
      }
      .piece.dual-form.death-form {
        background: linear-gradient(125deg, #142843 0 68%, #f4d996 69%);
        border-color: #78d9ff;
        color: #d5f7ff;
        box-shadow:
          0 0 0 1px #b1eaff,
          inset 0 0 9px #54bfff55;
      }
      .piece.death-form .form-other {
        background: #ffe5a4;
        color: #65411d;
      }
      .piece.dual-form.death-form.red {
        color: #ffb5ae;
        box-shadow:
          0 0 0 2px #db6b65,
          inset 0 0 9px #54bfff55;
      }
      .piece.veiled {
        background: radial-gradient(
          circle at 35% 25%,
          #677b87,
          #263e4e
        ) !important;
        border-style: solid !important;
        box-shadow: inset 0 0 0 3px #ffffff12 !important;
        color: transparent !important;
      }
      .piece.veiled:before,
      .piece.veiled:after {
        display: none !important;
      }
      .piece.veiled.red {
        border-color: #ff8276 !important;
      }
      .piece.veiled.neutral {
        border-color: #9edb9b !important;
      }

      .new-skill-status {
        margin: 5px 0;
        padding: 7px 10px;
        background: #17313c;
        border: 1px solid #527180;
        border-radius: 8px;
        font-size: 12px;
        line-height: 1.5;
        color: #d9f2f6;
      }
      .drop-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin: 5px 0;
      }
      /* Shared event vocabulary: local silhouettes, short motion, transparent piece faces. */
      .fx-event {
        --event-color: #92652a;
        pointer-events: none;
        color: var(--event-color);
        animation: skill-event-fade 1.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      }
      .fx-event[data-theme="sky"] {
        --event-color: #5b8584;
      }
      .fx-event[data-theme="dual"],
      .fx-event[data-theme="time"] {
        --event-color: #7b6b83;
      }
      .fx-event[data-theme="ember"],
      .fx-event[data-theme="bronze"] {
        --event-color: #865735;
      }
      .fx-event[data-theme="jade"] {
        --event-color: #4f7948;
      }
      .fx-event[data-theme="petal"] {
        --event-color: #9b6b78;
      }
      .fx-event[data-theme="royal"] {
        --event-color: #92794f;
      }
      .fx-event-mark {
        animation: skill-event-appear 0.7s ease-out both;
        animation-delay: calc(var(--n) * 12ms);
        transform-box: fill-box;
        transform-origin: center;
      }
      .fx-event-ring,
      .fx-event-fine,
      .fx-event-wake,
      .fx-event-duality,
      .fx-event-leaves,
      .fx-event-ground,
      .fx-event-time,
      .fx-event-blessing,
      .fx-event-retreat,
      .fx-event-charge-trail,
      .fx-event-charge-core,
      .fx-event-landing,
      .fx-event-sparks {
        fill: none;
        stroke: var(--event-color);
        stroke-width: 0.55;
      }
      .fx-event-ring {
        animation: skill-event-ring 0.85s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-fine {
        opacity: 0.45;
        stroke-width: 0.25;
      }
      .fx-event-wake,
      .fx-event-ground {
        stroke-width: 0.45;
        opacity: 0.65;
      }
      .fx-event-wings {
        animation: skill-event-wing 0.95s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-rise {
        animation: skill-event-rise 0.8s cubic-bezier(0.12, 0.7, 0.2, 1) both;
      }
      .fx-event-duality {
        stroke-width: 0.85;
        animation: skill-event-orbit 1.05s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-echo {
        fill: none;
        stroke: currentColor;
        stroke-width: 0.4;
        opacity: 0.42;
      }
      .fx-event-break {
        fill: #ac785c;
        stroke: #f6d7a2;
        stroke-width: 0.35;
        animation: skill-event-break 0.85s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-sparks {
        animation: skill-event-ring 0.8s ease-out both;
      }
      .fx-event-leaves {
        animation: skill-event-leaf 1s ease-out both;
      }
      .fx-event-bloom {
        animation: skill-event-bloom 0.85s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-charge-trail {
        stroke-width: 3;
        opacity: 0.2;
      }
      .fx-event-charge-core {
        stroke: #ffe2b0;
        stroke-width: 0.9;
        stroke-dasharray: 100;
        animation: motion-trace 0.6s ease-out both;
      }
      .fx-event-impact {
        animation: skill-event-impact 0.65s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-time {
        stroke-width: 0.7;
      }
      .fx-event-dial {
        animation: skill-event-rewind 1.05s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-blessing {
        animation: skill-event-orbit 0.9s ease-out both;
        transform-origin: 0 0;
      }
      .fx-event-retreat {
        stroke-dasharray: 0.6 1.3;
        opacity: 0.6;
      }
      .fx-event-dodge {
        animation: skill-event-dodge 0.6s ease-out both;
      }
      .fx-event-landing {
        opacity: 0.45;
        stroke-dasharray: 2 1.5;
      }
      .fx-event-drop {
        animation: skill-event-drop 0.65s cubic-bezier(0.15, 0.7, 0.25, 1) both;
      }
      @keyframes skill-event-fade {
        0% {
          opacity: 0;
        }
        22%,
        58% {
          opacity: 0.84;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes skill-event-appear {
        from {
          opacity: 0;
        }
        18%,
        100% {
          opacity: 1;
        }
      }
      @keyframes skill-event-ring {
        from {
          transform: scale(0.65);
          opacity: 0;
        }
        25% {
          opacity: 0.9;
        }
        to {
          transform: scale(1.12);
          opacity: 0;
        }
      }
      @keyframes skill-event-rise {
        from {
          transform: translateY(2px);
          opacity: 0;
        }
        55%,
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes skill-event-wing {
        from {
          transform: scale(0.45, 0.7);
        }
        55% {
          transform: scale(1.08, 1);
        }
        to {
          transform: scale(1, 1);
        }
      }
      @keyframes skill-event-orbit {
        from {
          transform: rotate(-85deg);
          opacity: 0;
        }
        45% {
          opacity: 1;
        }
        to {
          transform: rotate(30deg);
          opacity: 0;
        }
      }
      @keyframes skill-event-break {
        from {
          transform: scale(0.8);
          opacity: 1;
        }
        to {
          transform: scale(1.75) rotate(12deg);
          opacity: 0;
        }
      }
      @keyframes skill-event-leaf {
        from {
          transform: translate(-8px, -5px);
          opacity: 0;
        }
        40% {
          opacity: 1;
        }
        to {
          transform: translate(7px, 5px);
          opacity: 0;
        }
      }
      @keyframes skill-event-bloom {
        from {
          transform: scale(0.4) rotate(-25deg);
          opacity: 0;
        }
        55% {
          opacity: 0.9;
        }
        to {
          transform: scale(1.1) rotate(12deg);
          opacity: 0;
        }
      }
      
      @keyframes skill-event-impact {
        from {
          transform: scale(0.45);
          opacity: 0;
        }
        35% {
          transform: scale(1.1);
          opacity: 1;
        }
        to {
          transform: scale(1);
          opacity: 0;
        }
      }
      @keyframes skill-event-rewind {
        from {
          transform: rotate(75deg);
        }
        to {
          transform: rotate(-135deg);
        }
      }
      @keyframes skill-event-dodge {
        from {
          transform: translateX(-2px);
          opacity: 0;
        }
        25% {
          transform: translateX(2px);
          opacity: 1;
        }
        to {
          transform: translateX(0);
          opacity: 0;
        }
      }
      @keyframes skill-event-drop {
        from {
          transform: translateY(-10px);
          opacity: 0;
        }
        60% {
          transform: translateY(1px);
          opacity: 1;
        }
        to {
          transform: translateY(0);
          opacity: 0;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .fx-event {
          animation: skill-event-static 0.35s linear both;
        }
        .fx-event * {
          animation: none !important;
        }
        @keyframes skill-event-static {
          0%,
          75% {
            opacity: 0.75;
          }
          to {
            opacity: 0;
          }
        }
      }
    

/* Refined event composition: bounded SVG geometry, no filters or permanent motion. */
.fx-refined-release { transform-box: view-box; transform-origin: 0 0; animation: refined-release .9s cubic-bezier(.16,.7,.25,1) both; animation-delay: .14s; }
.fx-refined-focus { animation: refined-focus .85s ease-out both; }
@keyframes refined-release { 0% { opacity: 0; transform: scale(.65); } 20% { opacity: .65; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes refined-focus { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-refined-release, .fx-refined-focus { animation: none; opacity: .35; } }