/* WarGod Three-Chapter Master Interactive V1
 * Coordinates remain tied to the native 1672 x 2545 master.  The artwork and
 * every interaction plane scale through the same responsive containing block.
 */

:root {
    color-scheme: dark;
    --tc-ink: #f7e6bd;
    --tc-muted: #c5b68f;
    --tc-gold: #e5bd68;
    --tc-blue: #4db8ff;
    --tc-deep: #020914;
}

@property --tc-nav-edge-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--tc-deep);
    scroll-behavior: smooth;
}

body.tc-page {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 0, #123868 0, #06172f 28rem, #020914 70rem),
        #020914;
    color: var(--tc-ink);
    font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", serif;
}

.tc-skip {
    position: fixed;
    z-index: 100;
    top: .75rem;
    left: .75rem;
    padding: .65rem 1rem;
    border: 1px solid #f0cf83;
    border-radius: .35rem;
    background: #07162c;
    color: #fff4d6;
    transform: translateY(-180%);
}

.tc-skip:focus {
    transform: translateY(0);
}

.tc-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tc-master {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 3840px;
    margin: 0 auto;
    overflow: hidden;
    background: #07172b;
    box-shadow: 0 0 5rem rgba(0, 0, 0, .78);
}

.tc-master__art {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
}

.tc-ambient,
.tc-content-layer,
.tc-debug-layer,
.tc-section {
    position: absolute;
    inset: 0;
}

.tc-ambient {
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
}

.tc-content-layer {
    z-index: 20;
    pointer-events: none;
}

.tc-debug-layer {
    z-index: 50;
    pointer-events: none;
}

.tc-section {
    pointer-events: none;
}

.tc-hotspot,
.tc-content-safe-area,
.tc-hero-subtitle,
.tc-qr,
.tc-crystal-pulse,
.tc-frame-shimmer {
    position: absolute;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
}

.tc-hotspot {
    z-index: 30;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    appearance: none;
    pointer-events: auto;
    outline: none;
}

.tc-hotspot::before,
.tc-hotspot::after {
    content: "";
    position: absolute;
    inset: 3%;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.tc-hotspot::before {
    border: 1px solid rgba(255, 218, 139, .06);
    background:
        linear-gradient(105deg, transparent 24%, rgba(255, 239, 184, .28) 48%, transparent 70%),
        radial-gradient(circle at 50% 50%, rgba(63, 165, 255, .16), transparent 67%);
    background-size: 260% 100%, 100% 100%;
    background-position: 150% 0, 0 0;
}

.tc-hotspot::after {
    box-shadow:
        inset 0 0 1rem rgba(80, 176, 255, .2),
        inset 0 0 .2rem rgba(255, 235, 175, .9),
        0 0 1rem rgba(221, 170, 71, .28);
}

.tc-hotspot:hover::before,
.tc-hotspot:focus-visible::before {
    opacity: .92;
    animation: tc-button-shimmer 1.25s ease both;
}

.tc-hotspot:hover::after,
.tc-hotspot:focus-visible::after {
    opacity: .9;
}

.tc-hotspot:focus-visible {
    outline: max(2px, .11vw) solid #fff0bd;
    outline-offset: max(2px, .12vw);
}

.tc-hotspot[aria-disabled="true"] {
    cursor: not-allowed;
}

.tc-hotspot[aria-disabled="true"]::before {
    background: rgba(10, 24, 45, .16);
}

.tc-hotspot--hero {
    border-radius: 0;
    clip-path: var(--tc-hotspot-shape);
}

.tc-hotspot[data-hotspot-group="navigation"]::before {
    inset: 6% 4%;
    border-color: rgba(255, 222, 142, .08);
    background: linear-gradient(105deg, transparent 28%, rgba(255, 237, 177, .22) 49%, transparent 69%);
}

.tc-bgm-control {
    position: absolute;
    z-index: 34;
    left: calc(1427 / 1672 * 100%);
    top: calc(23 / 2545 * 100%);
    width: calc(190 / 1672 * 100%);
    height: calc(79 / 2545 * 100%);
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    pointer-events: auto;
    transition: filter 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.tc-bgm-control::before,
.tc-bgm-control::after {
    content: none;
}

.tc-bgm-control:hover,
.tc-bgm-control:focus-visible {
    filter: brightness(1.12) drop-shadow(0 0 .35rem rgba(77, 181, 255, .48)) drop-shadow(0 0 .2rem rgba(238, 194, 92, .4));
    transform: translateY(-2%);
}

.tc-bgm-control:focus-visible {
    outline: max(2px, .11vw) solid #fff1bf;
    outline-offset: max(2px, .1vw);
}

.tc-bgm-control__art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 .24rem rgba(61, 169, 255, .34));
}

.tc-bgm-control.is-playing .tc-bgm-control__art {
    animation: tc-bgm-breathe 3.8s ease-in-out infinite;
}

.tc-bgm-control[aria-pressed="false"] {
    opacity: .74;
    filter: saturate(.62) brightness(.78);
}

.tc-hotspot[data-hotspot-id="NEWS_MORE"]::after,
.tc-hotspot[data-hotspot-id="COMMUNITY_MORE"]::after {
    inset: 8% 4%;
    border-radius: 999px;
    box-shadow: inset 0 0 .35rem rgba(255, 239, 189, .8), 0 0 .8rem rgba(224, 173, 70, .32);
}

.tc-hotspot[data-hotspot-id^="CODEX_"]:hover::after,
.tc-hotspot[data-hotspot-id^="CODEX_"]:focus-visible::after {
    inset: 2%;
    box-shadow: inset 0 0 .6rem rgba(255, 229, 157, .72), 0 0 .75rem rgba(62, 168, 255, .3);
}

.tc-hotspot[data-hotspot-id^="BOTTOM_"]:hover::before,
.tc-hotspot[data-hotspot-id^="BOTTOM_"]:focus-visible::before {
    opacity: .82;
    transform: translate3d(0, -.08%, 0);
}

.tc-hotspot--social {
    border-radius: 22%;
}

.tc-hotspot--qr::before,
.tc-hotspot--qr::after {
    inset: -1.5%;
    border-radius: 3%;
}

.tc-content-safe-area {
    z-index: 20;
    overflow: hidden;
    color: #ead9b4;
    pointer-events: auto;
}

.tc-live-list {
    display: grid;
    align-content: center;
    gap: clamp(1px, .24vw, 9px);
    height: 100%;
    margin: 0;
    padding: 3.8% 4.8%;
    list-style: none;
}

.tc-live-row {
    min-width: 0;
    border-bottom: 1px solid rgba(207, 166, 82, .15);
}

.tc-live-row:last-child {
    border-bottom: 0;
}

.tc-live-row__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2px, .38vw, 14px);
    min-height: clamp(12px, 1.56vw, 60px);
    padding: 1.2% 1%;
    color: #ead9b4;
    font-size: clamp(5px, .78vw, 30px);
    line-height: 1.35;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.tc-live-row__link:hover,
.tc-live-row__link:focus-visible {
    color: #fff1c6;
    background: linear-gradient(90deg, rgba(43, 105, 164, .18), rgba(200, 153, 61, .12));
    transform: translateX(.5%);
    outline: 1px solid rgba(241, 199, 111, .55);
    outline-offset: 0;
}

.tc-live-marker {
    max-width: 6em;
    overflow: hidden;
    color: #9bcfff;
    font-size: .78em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-live-marker.is-pinned {
    color: #ffd985;
}

.tc-live-title {
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-live-date {
    color: #bcae8c;
    font-size: .82em;
    white-space: nowrap;
}

.tc-live-row__link--community {
    grid-template-columns: minmax(0, 1fr) auto;
}

.tc-community-copy,
.tc-community-meta {
    min-width: 0;
}

.tc-community-copy {
    display: grid;
    gap: .15em;
}

.tc-community-meta {
    display: flex;
    gap: .55em;
    overflow: hidden;
    color: #aebbd0;
    font-size: .72em;
    white-space: nowrap;
}

.tc-community-meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-community-replies {
    display: grid;
    justify-items: center;
    min-width: 2.3em;
    color: #d5c08c;
    font-size: .74em;
}

.tc-community-replies small {
    font-size: .74em;
}

.tc-live-empty {
    display: grid;
    place-items: center;
    height: 100%;
    color: rgba(228, 211, 173, .76);
    font-size: clamp(6px, .9vw, 34px);
    letter-spacing: .12em;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .85);
}

.tc-codex-panel {
    overflow-y: auto;
    background: transparent;
    box-shadow: none;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.tc-codex-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.tc-codex-panel__page {
    min-height: 100%;
    padding: 5% 6%;
    background: transparent;
    outline: none;
}

.tc-codex-panel__page[hidden] {
    display: none;
}

.tc-codex-panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 2.5%;
    border-bottom: 1px solid rgba(222, 181, 94, .3);
}

.tc-codex-panel__header h2,
.tc-codex-panel__header p {
    margin: 0;
}

.tc-codex-panel__header h2 {
    color: #f8e4af;
    font-size: clamp(8px, 1.32vw, 50px);
    letter-spacing: .16em;
    text-shadow: 0 2px 4px #000, 0 0 .7rem rgba(224, 177, 78, .2);
}

.tc-codex-panel__header p {
    color: #9cb4ce;
    font-size: clamp(5px, .72vw, 28px);
    letter-spacing: .12em;
}

.tc-codex-panel__entries {
    margin: 3% 0 0;
    padding: 0 0 0 1.5em;
    font-size: clamp(6px, .9vw, 35px);
}

.tc-codex-panel__entries a {
    color: #edd9a8;
}

.tc-codex-panel__empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .45em;
    min-height: 76%;
    color: rgba(222, 207, 170, .74);
    font-size: clamp(6px, 1vw, 38px);
    letter-spacing: .12em;
    text-align: center;
}

.tc-codex-panel__empty small {
    color: #93a8c0;
    font-size: .72em;
}

.tc-hero-subtitle {
    z-index: 20;
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
    pointer-events: none;
    /* The approved artwork uses a two-axis feather, never an opaque banner. */
    mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 21%, #000 78%, transparent 100%);
    mask-composite: intersect;
    mask-repeat: no-repeat;
}

.tc-hero-subtitle::before,
.tc-hero-subtitle::after {
    content: none;
}

.tc-hero-subtitle > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    padding: 0;
    border: 0;
    min-height: 0;
}

.tc-hero-subtitle__art {
    display: block;
    position: absolute;
    left: 0;
    top: -165.384615%;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    filter: none;
    transform: none;
    opacity: 1;
}

.tc-qr {
    z-index: 20;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    opacity: 1;
    filter: none !important;
    transform: none !important;
    pointer-events: none;
}

.tc-crystal-pulse {
    z-index: 12;
    border-radius: 50%;
    opacity: .34;
    background: radial-gradient(circle, rgba(232, 250, 255, .98) 0, rgba(80, 190, 255, .58) 22%, rgba(14, 90, 208, .12) 58%, transparent 75%);
    mix-blend-mode: screen;
    animation: tc-crystal-breathe 5.2s ease-in-out var(--delay) infinite;
}

.tc-frame-shimmer {
    z-index: 11;
    border: 1px solid rgba(234, 191, 92, .08);
    border-radius: 4%;
    opacity: .28;
    background: linear-gradient(108deg, transparent 35%, rgba(255, 231, 164, .12) 48%, rgba(89, 190, 255, .09) 52%, transparent 65%);
    background-size: 280% 100%;
    box-shadow: inset 0 0 1rem rgba(65, 162, 250, .16), 0 0 1rem rgba(235, 185, 81, .14);
    animation: tc-frame-breathe 9.2s ease-in-out var(--delay) infinite;
}

.tc-frame-shimmer--codex {
    border-radius: 2%;
}

.tc-frame-shimmer--support {
    border-radius: 1%;
}

.tc-logo-glint {
    position: absolute;
    z-index: 13;
    left: 27.5%;
    top: 6.7%;
    width: 45%;
    height: 8.8%;
    overflow: hidden;
    opacity: 0;
    mix-blend-mode: screen;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 245, 201, .08) 47%, rgba(255, 255, 255, .72) 50%, rgba(111, 190, 255, .15) 54%, transparent 61%);
    transform: skewX(-16deg) translateX(-70%);
    animation: tc-logo-sweep 8.4s ease-in-out 1.8s infinite;
}

.tc-logo-gem-core,
.tc-logo-star {
    position: absolute;
    z-index: 14;
    left: 48.1%;
    top: 4.15%;
    width: 3.7%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
}

.tc-logo-gem-core {
    background: radial-gradient(circle, rgba(255, 255, 255, .98) 0 4%, rgba(83, 210, 255, .78) 13%, rgba(20, 116, 246, .26) 38%, transparent 70%);
    animation: tc-logo-gem-pulse 4.2s ease-in-out infinite;
}

.tc-logo-star {
    background:
        linear-gradient(90deg, transparent 47%, rgba(255, 245, 205, .96) 49% 51%, transparent 53%),
        linear-gradient(0deg, transparent 47%, rgba(150, 224, 255, .9) 49% 51%, transparent 53%);
    opacity: 0;
    transform: scale(.35) rotate(22deg);
    animation: tc-logo-star-pop 7.8s ease-in-out 1.1s infinite;
}

.tc-logo-star--secondary {
    left: 44.7%;
    top: 7.05%;
    width: 2.1%;
    animation-delay: 4.9s;
    animation-duration: 8.6s;
}

.tc-logo-rune-trace,
.tc-nav-edge-flow,
.tc-hero-aura,
.tc-armor-spark,
.tc-floor-rune-flow,
.tc-blue-gold-dust {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    mix-blend-mode: screen;
}

.tc-logo-rune-trace {
    z-index: 13;
    left: 35.4%;
    top: 2.15%;
    width: 29.2%;
    height: 11.8%;
    border-radius: 50%;
    opacity: 0;
    background:
        conic-gradient(from 24deg, transparent 0 10%, rgba(255, 218, 124, .46) 12%, transparent 15% 38%, rgba(72, 184, 255, .4) 41%, transparent 44% 72%, rgba(255, 230, 155, .28) 75%, transparent 78%),
        radial-gradient(ellipse, transparent 54%, rgba(79, 184, 255, .15) 55% 57%, transparent 58%);
    filter: blur(.15px) drop-shadow(0 0 .45rem rgba(66, 167, 255, .42));
    animation: tc-logo-rune 12.8s ease-in-out infinite;
}

.tc-nav-edge-flow {
    z-index: 14;
    left: var(--left);
    top: var(--top);
    width: var(--width);
    height: var(--height);
    padding: max(1px, .055vw);
    border-radius: 8% / 26%;
    opacity: .72;
    background: conic-gradient(
        from var(--tc-nav-edge-angle),
        transparent 0 70%,
        rgba(230, 183, 85, .16) 73%,
        rgba(255, 224, 139, .9) 77%,
        rgba(255, 252, 224, .98) 79%,
        rgba(83, 190, 255, .72) 81%,
        transparent 86% 100%
    );
    filter: drop-shadow(0 0 .18rem rgba(226, 177, 73, .54));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: tc-nav-edge-chase 6.2s linear var(--edge-delay) infinite;
}

.tc-hero-aura {
    width: 19%;
    height: 14%;
    border-radius: 50%;
    opacity: .2;
    background: radial-gradient(ellipse, rgba(255, 226, 161, .25), rgba(78, 176, 255, .15) 36%, transparent 70%);
    filter: blur(.8px);
    animation: tc-hero-aura 7.6s ease-in-out infinite;
}

.tc-hero-aura::before,
.tc-hero-aura::after {
    content: "";
    position: absolute;
    width: 5%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 6%, rgba(255, 220, 135, .8) 12%, rgba(78, 188, 255, .38) 32%, transparent 68%);
    filter: drop-shadow(0 0 .25rem rgba(93, 198, 255, .66));
    opacity: 0;
    animation: tc-hero-micro-glint 6.8s ease-in-out infinite;
}

.tc-hero-aura::before { left: 24%; top: 31%; }
.tc-hero-aura::after { right: 19%; top: 58%; animation-delay: -3.1s; }

.tc-hero-aura--knight { left: 4%; top: 6%; animation-delay: -1.1s; }
.tc-hero-aura--mage { left: 18.5%; top: 4.8%; animation-delay: -3.8s; }
.tc-hero-aura--elf { left: 63%; top: 5.1%; animation-delay: -5.4s; }
.tc-hero-aura--princess { left: 78%; top: 5.6%; animation-delay: -2.6s; }

.tc-armor-spark {
    width: 1.6%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 47%, rgba(255, 241, 192, .96) 49% 51%, transparent 53%),
        linear-gradient(0deg, transparent 47%, rgba(123, 211, 255, .9) 49% 51%, transparent 53%),
        radial-gradient(circle, #fff 0 4%, rgba(255, 216, 123, .58) 12%, transparent 55%);
    filter: drop-shadow(0 0 .32rem rgba(79, 184, 255, .7));
    animation: tc-armor-spark 8.4s ease-in-out infinite;
}

.tc-armor-spark--one { left: 11.8%; top: 11.2%; animation-delay: -1.2s; }
.tc-armor-spark--two { left: 30.2%; top: 8.8%; animation-delay: -4.6s; }
.tc-armor-spark--three { left: 69.4%; top: 10.9%; animation-delay: -6.8s; }
.tc-armor-spark--four { left: 87.3%; top: 9.2%; animation-delay: -2.9s; }
.tc-armor-spark--five { left: 14.2%; top: 18.1%; animation-delay: -5.7s; }
.tc-armor-spark--six { left: 25.3%; top: 14.1%; animation-delay: -7.3s; }
.tc-armor-spark--seven { left: 75.4%; top: 16.4%; animation-delay: -3.5s; }
.tc-armor-spark--eight { left: 83.1%; top: 13.8%; animation-delay: -6.1s; }

.tc-floor-rune-flow {
    left: 17%;
    width: 66%;
    height: 2.1%;
    border-radius: 50%;
    border-top: 1px solid rgba(238, 196, 99, .32);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(71, 174, 255, .1) 30%, rgba(255, 226, 151, .28) 50%, rgba(71, 174, 255, .1) 70%, transparent);
    filter: drop-shadow(0 0 .5rem rgba(225, 174, 70, .36));
    animation: tc-floor-rune 10.8s ease-in-out infinite;
}

.tc-floor-rune-flow--one { top: 20.3%; transform: perspective(600px) rotateX(68deg); }
.tc-floor-rune-flow--two { top: 31.1%; transform: perspective(600px) rotateX(70deg) scale(.82); animation-delay: -5.2s; }
.tc-floor-rune-flow--three { left: 24%; top: 24.9%; width: 52%; transform: perspective(600px) rotateX(72deg) scale(.74); animation-delay: -8.1s; }

.tc-blue-gold-dust {
    inset: 0;
    opacity: .24;
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 221, 139, .72) 0 .04%, transparent .11%),
        radial-gradient(circle at 22% 17%, rgba(88, 194, 255, .78) 0 .05%, transparent .13%),
        radial-gradient(circle at 38% 9%, rgba(255, 226, 150, .7) 0 .04%, transparent .11%),
        radial-gradient(circle at 61% 15%, rgba(92, 196, 255, .75) 0 .05%, transparent .14%),
        radial-gradient(circle at 78% 7%, rgba(255, 222, 143, .7) 0 .04%, transparent .12%),
        radial-gradient(circle at 91% 20%, rgba(75, 185, 255, .72) 0 .05%, transparent .13%),
        radial-gradient(circle at 31% 39%, rgba(255, 218, 124, .65) 0 .04%, transparent .12%),
        radial-gradient(circle at 70% 45%, rgba(77, 190, 255, .68) 0 .05%, transparent .14%);
    animation: tc-dust-drift 13.5s ease-in-out infinite;
}

.tc-blade-glint {
    position: absolute;
    z-index: 13;
    width: 18%;
    height: max(1px, .045vw);
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(124, 211, 255, .72) 24%, rgba(255, 239, 181, .96) 54%, rgba(255, 255, 255, .82) 62%, transparent);
    box-shadow: 0 0 .36rem rgba(74, 178, 255, .68), 0 0 .1rem rgba(255, 224, 149, .8);
    transform-origin: left center;
    animation: tc-blade-run 8.8s ease-in-out infinite;
}

.tc-blade-glint--left {
    --blade-angle: 128deg;
    left: 19.45%;
    top: 14.35%;
    width: 14.7%;
    transform: rotate(var(--blade-angle)) scaleX(.05);
}

.tc-blade-glint--right {
    --blade-angle: 74deg;
    left: 86.85%;
    top: 8.55%;
    width: 8.9%;
    transform: rotate(var(--blade-angle)) scaleX(.05);
    animation-delay: 3.9s;
}

.tc-blade-spark,
.tc-energy-ribbon {
    position: absolute;
    z-index: 13;
    pointer-events: none;
    mix-blend-mode: screen;
}

.tc-blade-spark {
    width: 2.2%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background:
        linear-gradient(90deg, transparent 47%, rgba(255, 246, 209, .98) 49% 51%, transparent 53%),
        linear-gradient(0deg, transparent 47%, rgba(117, 211, 255, .94) 49% 51%, transparent 53%),
        radial-gradient(circle, rgba(255, 255, 255, .95), rgba(68, 177, 255, .42) 22%, transparent 68%);
    filter: drop-shadow(0 0 .35rem rgba(80, 190, 255, .75));
    animation: tc-blade-spark 8.8s ease-in-out infinite;
}

.tc-blade-spark--left {
    left: 16.9%;
    top: 22.25%;
}

.tc-blade-spark--right {
    left: 92.15%;
    top: 14.7%;
    animation-delay: 3.9s;
}

.tc-energy-ribbon {
    left: 8%;
    width: 84%;
    height: .55%;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0 14%, rgba(70, 174, 255, .08) 28%, rgba(255, 224, 150, .33) 49%, rgba(76, 182, 255, .1) 72%, transparent 88%);
    filter: blur(.35px);
    transform: translate3d(-22%, 0, 0) skewX(-18deg);
    animation: tc-energy-ribbon 11.8s ease-in-out infinite;
}

.tc-energy-ribbon--hero {
    top: 19.25%;
}

.tc-energy-ribbon--codex {
    top: 62.05%;
    animation-delay: 3.8s;
}

.tc-energy-ribbon--support {
    top: 78.6%;
    animation-delay: 7.1s;
}

.tc-magic-rise {
    position: absolute;
    z-index: 12;
    left: 46.7%;
    top: 35.7%;
    width: 6.8%;
    height: 6.4%;
    opacity: .44;
    background:
        radial-gradient(circle at 48% 88%, rgba(182, 236, 255, .8) 0 1%, transparent 2%),
        radial-gradient(circle at 63% 64%, rgba(91, 181, 255, .7) 0 1.2%, transparent 2.3%),
        radial-gradient(circle at 36% 43%, rgba(255, 222, 151, .7) 0 1%, transparent 2%),
        radial-gradient(ellipse at center bottom, rgba(49, 154, 255, .18), transparent 65%);
    animation: tc-magic-rise 6.8s ease-in-out infinite;
}

.tc-statue-halo,
.tc-statue-trail,
.tc-support-dust,
.tc-qr-frame-glow,
.tc-gust-dust {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    mix-blend-mode: screen;
}

.tc-statue-halo {
    left: 43.2%;
    top: 37.2%;
    width: 13.7%;
    height: 4.4%;
    border-radius: 50%;
    border: 1px solid rgba(94, 188, 255, .25);
    box-shadow: 0 0 1.2rem rgba(48, 157, 255, .25), inset 0 0 1.2rem rgba(61, 174, 255, .18);
    animation: tc-statue-halo-spread 7.2s ease-out .9s infinite;
}

.tc-statue-trail {
    left: 48.2%;
    top: 34.4%;
    width: 3.6%;
    height: 8.5%;
    opacity: 0;
    background:
        radial-gradient(circle at 42% 80%, rgba(181, 235, 255, .9) 0 1.2%, transparent 2.4%),
        radial-gradient(circle at 65% 58%, rgba(76, 185, 255, .82) 0 1.4%, transparent 2.8%),
        linear-gradient(82deg, transparent 46%, rgba(139, 219, 255, .28) 49%, transparent 53%);
    animation: tc-statue-trail-rise 8.6s ease-in-out 2.4s infinite;
}

.tc-support-dust {
    left: 20.5%;
    top: 69.7%;
    width: 19%;
    height: 7.2%;
    opacity: .2;
    background:
        radial-gradient(circle at 28% 68%, rgba(255, 221, 145, .85) 0 .7%, transparent 1.8%),
        radial-gradient(circle at 55% 42%, rgba(91, 195, 255, .9) 0 .8%, transparent 2%),
        radial-gradient(circle at 77% 61%, rgba(255, 235, 179, .75) 0 .6%, transparent 1.7%),
        radial-gradient(ellipse at center, rgba(68, 167, 255, .1), transparent 67%);
    animation: tc-support-dust-gather 7.8s ease-in-out 1.6s infinite;
}

.tc-qr-frame-glow {
    left: 69.85%;
    top: 70.9%;
    width: 11.7%;
    height: 7.05%;
    border: 1px solid rgba(234, 190, 94, .18);
    border-radius: 3%;
    box-shadow: 0 0 1.1rem rgba(225, 173, 66, .13);
    animation: tc-qr-frame-breathe 9.4s ease-in-out 4.2s infinite;
}

.tc-gust-dust {
    left: -14%;
    width: 70%;
    height: 5%;
    opacity: 0;
    background: repeating-linear-gradient(105deg, transparent 0 8%, rgba(182, 226, 255, .1) 8.2%, transparent 8.7% 16%);
    filter: blur(.6px);
}

.tc-gust-dust--one {
    top: 10%;
    animation: tc-gust-pass 14s ease-in-out 1s infinite;
}

.tc-gust-dust--two {
    top: 20%;
    animation: tc-gust-pass 17s ease-in-out 7s infinite;
}

.tc-gust-dust--three {
    top: 31%;
    animation: tc-gust-pass 12s ease-in-out 4s infinite;
}

.tc-petal-field,
.tc-petal {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tc-petal {
    left: var(--petal-left);
    top: var(--petal-top);
    width: clamp(3px, var(--petal-size), 18px);
    height: calc(clamp(3px, var(--petal-size), 18px) * .58);
    border-radius: 80% 18% 75% 24%;
    opacity: 0;
    background: radial-gradient(ellipse at 35% 35%, rgba(255, 246, 250, .9), rgba(236, 167, 203, .6) 52%, rgba(167, 89, 155, .1));
    filter: blur(.15px);
    transform: rotate(var(--petal-rotation));
    animation: tc-petal-drift var(--petal-duration) linear var(--petal-delay) infinite;
}

.tc-petal--far {
    filter: blur(.05px);
}

.tc-petal--mid {
    filter: blur(.22px);
}

.tc-petal--near {
    filter: blur(.8px);
}

.tc-ambient.is-paused *,
.tc-master.tc-motion-paused .tc-ambient * {
    animation-play-state: paused !important;
}

.tc-debug-layer.is-visible {
    background: rgba(0, 12, 28, .06);
}

.tc-debug-label {
    position: absolute;
    z-index: 50;
    display: grid;
    align-content: start;
    min-width: max-content;
    padding: .16rem .25rem;
    border: 1px solid #ffd86e;
    background: rgba(15, 8, 1, .86);
    color: #fff1bd;
    font: 600 clamp(7px, .55vw, 18px)/1.2 Consolas, monospace;
    text-shadow: 0 1px 1px #000;
}

.tc-debug-label[data-debug-status="PENDING_SUBPAGE"] {
    border-color: #ffe08a;
    color: #ffe0a1;
}

.tc-master.is-debugging .tc-hotspot {
    background: transparent !important;
    outline: max(3px, .18vw) solid #ffd347;
    outline-offset: calc(max(3px, .18vw) * -1);
    box-shadow: inset 0 0 0 1px rgba(84, 43, 0, .95), 0 0 .35rem rgba(255, 192, 48, .85);
}

.tc-master.is-debugging .tc-hotspot[data-binding-status="PENDING_SUBPAGE"] {
    outline-color: #ffdf72;
}

.tc-master.is-debugging .tc-hotspot--hero {
    outline: 0;
    box-shadow: none;
}

.tc-debug-shape-overlay {
    position: absolute;
    z-index: 49;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.tc-debug-shape-overlay polygon {
    fill: rgba(255, 211, 71, .1);
    stroke: #ffd347;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

@keyframes tc-button-shimmer {
    from { background-position: 160% 0, 0 0; filter: brightness(1); }
    55% { filter: brightness(1.16); }
    to { background-position: -80% 0, 0 0; filter: brightness(1.04); }
}

@keyframes tc-bgm-sweep {
    from { transform: translateX(-78%); }
    to { transform: translateX(82%); }
}

@keyframes tc-bgm-breathe {
    0%, 100% { filter: drop-shadow(0 0 .18rem rgba(62, 168, 255, .38)); transform: scale(.96); }
    48% { filter: drop-shadow(0 0 .48rem rgba(91, 198, 255, .78)); transform: scale(1.05); }
}

@keyframes tc-logo-rune {
    0%, 100% { opacity: .08; transform: rotate(-3deg) scale(.96); }
    32% { opacity: .42; }
    66% { opacity: .18; transform: rotate(5deg) scale(1.04); }
}

@keyframes tc-nav-edge-chase {
    0% { --tc-nav-edge-angle: 0deg; opacity: .36; }
    44% { opacity: .82; }
    100% { --tc-nav-edge-angle: 360deg; opacity: .4; }
}

@keyframes tc-hero-aura {
    0%, 100% { opacity: .08; transform: scale(.94); }
    48% { opacity: .38; transform: scale(1.07); }
    72% { opacity: .2; transform: scale(1.01); }
}

@keyframes tc-hero-micro-glint {
    0%, 62%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    70% { opacity: .5; }
    77% { opacity: .96; transform: scale(1.12) rotate(38deg); }
    86% { opacity: 0; transform: scale(1.75) rotate(74deg); }
}

@keyframes tc-armor-spark {
    0%, 70%, 100% { opacity: 0; transform: scale(.25) rotate(0deg); }
    76% { opacity: .42; }
    81% { opacity: .92; transform: scale(1.08) rotate(42deg); }
    88% { opacity: 0; transform: scale(1.62) rotate(75deg); }
}

@keyframes tc-floor-rune {
    0%, 100% { opacity: .06; background-position: -55% 0; }
    38% { opacity: .48; }
    68% { opacity: .13; background-position: 155% 0; }
}

@keyframes tc-dust-drift {
    0%, 100% { opacity: .14; transform: translate3d(-.3%, .15%, 0); }
    46% { opacity: .35; transform: translate3d(.45%, -.25%, 0); }
    72% { opacity: .2; transform: translate3d(.2%, -.45%, 0); }
}

@keyframes tc-crystal-breathe {
    0%, 100% { opacity: .2; transform: scale(.94); }
    46% { opacity: .82; transform: scale(1.1); }
    68% { opacity: .36; transform: scale(1); }
}

@keyframes tc-frame-breathe {
    0%, 100% { opacity: .14; filter: brightness(.94); background-position: 145% 0; }
    42% { opacity: .52; filter: brightness(1.28); }
    58% { opacity: .24; filter: brightness(1.04); background-position: -45% 0; }
}

@keyframes tc-logo-gem-pulse {
    0%, 100% { opacity: .28; transform: scale(.82); }
    45% { opacity: .88; transform: scale(1.1); }
    65% { opacity: .42; transform: scale(.96); }
}

@keyframes tc-logo-star-pop {
    0%, 63%, 100% { opacity: 0; transform: scale(.3) rotate(22deg); }
    68% { opacity: .95; transform: scale(1.15) rotate(34deg); }
    75% { opacity: 0; transform: scale(1.6) rotate(48deg); }
}

@keyframes tc-logo-sweep {
    0%, 70%, 100% { opacity: 0; transform: skewX(-16deg) translateX(-75%); }
    76% { opacity: .62; }
    86% { opacity: 0; transform: skewX(-16deg) translateX(85%); }
}

@keyframes tc-blade-run {
    0%, 72%, 100% { opacity: 0; }
    76% { opacity: .1; transform: rotate(var(--blade-angle)) scaleX(.08); }
    84% { opacity: .82; transform: rotate(var(--blade-angle)) scaleX(1); }
    90% { opacity: 0; transform: rotate(var(--blade-angle)) scaleX(1.05); }
}

@keyframes tc-blade-spark {
    0%, 74%, 100% { opacity: 0; transform: scale(.25) rotate(0deg); }
    82% { opacity: .92; transform: scale(1) rotate(38deg); }
    90% { opacity: 0; transform: scale(1.5) rotate(70deg); }
}

@keyframes tc-energy-ribbon {
    0%, 66%, 100% { opacity: 0; transform: translate3d(-24%, 0, 0) skewX(-18deg); }
    73% { opacity: .16; }
    84% { opacity: .46; }
    92% { opacity: 0; transform: translate3d(24%, 0, 0) skewX(-18deg); }
}

@keyframes tc-magic-rise {
    0%, 100% { opacity: .18; transform: translateY(8%) scale(.96); }
    45% { opacity: .58; transform: translateY(-8%) scale(1.05); }
    72% { opacity: .22; transform: translateY(-15%) scale(1); }
}

@keyframes tc-statue-halo-spread {
    0%, 100% { opacity: 0; transform: scale(.68); }
    24% { opacity: .38; }
    64% { opacity: .08; transform: scale(1.08); }
}

@keyframes tc-statue-trail-rise {
    0%, 70%, 100% { opacity: 0; transform: translateY(18%); }
    76% { opacity: .55; }
    91% { opacity: 0; transform: translateY(-35%); }
}

@keyframes tc-support-dust-gather {
    0%, 100% { opacity: .12; transform: translate3d(-3%, 4%, 0) scale(.96); }
    48% { opacity: .5; transform: translate3d(3%, -4%, 0) scale(1.04); }
    72% { opacity: .24; transform: translate3d(1%, -7%, 0); }
}

@keyframes tc-qr-frame-breathe {
    0%, 100% { opacity: .08; box-shadow: 0 0 .4rem rgba(225, 173, 66, .08); }
    48% { opacity: .42; box-shadow: 0 0 1.1rem rgba(225, 173, 66, .24); }
}

@keyframes tc-gust-pass {
    0%, 62%, 100% { opacity: 0; transform: translate3d(-5%, 0, 0); }
    69% { opacity: .16; }
    82% { opacity: .04; transform: translate3d(105%, 13%, 0); }
}

@keyframes tc-petal-drift {
    0% { opacity: 0; transform: translate3d(-3vw, -2vh, 0) rotate(var(--petal-rotation)); }
    10% { opacity: var(--petal-opacity); }
    38% { transform: translate3d(var(--petal-step-x), var(--petal-step-y), 0) rotate(calc(var(--petal-rotation) + 82deg)); }
    58% { opacity: var(--petal-opacity); transform: translate3d(var(--petal-gust-x), var(--petal-gust-y), 0) rotate(calc(var(--petal-rotation) + 146deg)); }
    78% { opacity: calc(var(--petal-opacity) * .72); }
    100% { opacity: 0; transform: translate3d(var(--petal-travel-x), var(--petal-travel-y), 0) rotate(calc(var(--petal-rotation) + 260deg)); }
}

@media (max-width: 900px) {
    .tc-live-list {
        gap: 1px;
        padding: 3% 3.5%;
    }

    .tc-community-meta,
    .tc-live-marker {
        display: none;
    }

    .tc-live-row__link {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tc-codex-panel__header p,
    .tc-codex-panel__empty small {
        display: none;
    }
}

@media (forced-colors: active) {
    .tc-hotspot:focus-visible {
        outline: 2px solid Highlight;
    }

    .tc-hero-subtitle,
    .tc-bgm-control,
    .tc-content-safe-area {
        forced-color-adjust: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .tc-logo-glint,
    .tc-logo-gem-core,
    .tc-logo-star,
    .tc-logo-rune-trace,
    .tc-nav-edge-flow,
    .tc-hero-aura,
    .tc-hero-aura::before,
    .tc-hero-aura::after,
    .tc-armor-spark,
    .tc-blade-glint,
    .tc-blade-spark,
    .tc-energy-ribbon,
    .tc-magic-rise,
    .tc-statue-halo,
    .tc-statue-trail,
    .tc-support-dust,
    .tc-qr-frame-glow,
    .tc-gust-dust,
    .tc-floor-rune-flow,
    .tc-blue-gold-dust,
    .tc-petal,
    .tc-crystal-pulse,
    .tc-frame-shimmer,
    .tc-hotspot::before,
    .tc-hotspot::after,
    .tc-bgm-control,
    .tc-bgm-control::before,
    .tc-bgm-control::after,
    .tc-bgm-control img {
        animation: none !important;
        transition: none !important;
    }

    .tc-petal,
    .tc-logo-glint,
    .tc-logo-gem-core,
    .tc-logo-star,
    .tc-logo-rune-trace,
    .tc-nav-edge-flow,
    .tc-hero-aura,
    .tc-armor-spark,
    .tc-blade-glint,
    .tc-blade-spark,
    .tc-energy-ribbon,
    .tc-magic-rise,
    .tc-statue-halo,
    .tc-statue-trail,
    .tc-support-dust,
    .tc-qr-frame-glow,
    .tc-gust-dust,
    .tc-floor-rune-flow,
    .tc-blue-gold-dust {
        display: none !important;
    }
}