:root {
    --obsidian-950: #08070b;
    --obsidian-900: #100d13;
    --obsidian-800: #1a151c;
    --ash-700: #3a3137;
    --ash-500: #77666c;
    --bone-100: #f1e8d2;
    --bone-300: #cdbf9e;
    --relic-gold: #c49a52;
    --relic-bright: #f0cf79;
    --relic-shadow: #6c4828;
    --arcana: #75d5c7;
    --arcana-deep: #237d78;
    --blood: #a5323a;
    --venom: #83a85c;
    --ui-fast: 120ms;
    --ui-medium: 260ms;
    --ui-slow: 600ms;
    --ease-flight: cubic-bezier(.2, .8, .2, 1);
    --ease-impact: cubic-bezier(.2, 1.4, .35, 1);
    --focus-ring: 0 0 0 2px var(--obsidian-950), 0 0 0 5px var(--arcana);

    --bg-color: var(--obsidian-950);
    --panel-bg: rgba(19, 15, 20, .92);
    --glass-border: rgba(196, 154, 82, .3);
    --text-main: var(--bone-100);
    --text-muted: var(--bone-300);
    --primary: var(--relic-gold);
    --primary-glow: rgba(196, 154, 82, .45);
    --secondary: var(--arcana-deep);
    --accent: var(--relic-bright);
    --shield-color: var(--arcana);
    --ap-color: var(--relic-bright);
}

button,
[tabindex] {
    -webkit-tap-highlight-color: transparent;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--arcana);
    outline-offset: 4px;
    box-shadow: var(--focus-ring) !important;
}

.pixel-art,
#game-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.screen {
    visibility: hidden;
    display: flex;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    pointer-events: none;
    transition:
        opacity var(--ui-medium) var(--ease-flight),
        transform var(--ui-medium) var(--ease-flight),
        visibility 0s linear var(--ui-medium);
}

.screen.active {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    transition-delay: 0s;
}

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--bone-100);
    background: var(--obsidian-950);
    opacity: 1;
    transition: opacity var(--ui-slow) ease, visibility 0s linear 0s;
}

.loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, var(--ui-slow);
}

.loading-screen__veil {
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(circle at 50% 42%, rgba(117, 213, 199, .12), transparent 18%),
        radial-gradient(circle at 50% 55%, rgba(196, 154, 82, .12), transparent 35%),
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(255,255,255,.018) 31px 32px),
        linear-gradient(165deg, #21141c 0%, #0b090d 58%, #050507 100%);
    animation: loadingVeil 8s ease-in-out infinite alternate;
}

.loading-reliquary {
    position: relative;
    width: min(520px, calc(100vw - 40px));
    padding: 44px clamp(24px, 6vw, 64px) 36px;
    text-align: center;
    border: 1px solid rgba(196, 154, 82, .55);
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
    background:
        linear-gradient(90deg, transparent 0 7px, rgba(196,154,82,.28) 7px 8px, transparent 8px calc(100% - 8px), rgba(196,154,82,.28) calc(100% - 8px) calc(100% - 7px), transparent calc(100% - 7px)),
        rgba(12, 10, 13, .88);
    box-shadow: 0 30px 80px rgba(0,0,0,.75), inset 0 0 50px rgba(117,213,199,.04);
}

.loading-reliquary__sigil {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border: 3px solid var(--relic-gold);
    transform: rotate(45deg);
    box-shadow: inset 0 0 18px rgba(117,213,199,.25), 0 0 24px rgba(196,154,82,.16);
}

.loading-reliquary__sigil span {
    position: absolute;
    inset: 12px;
    border: 2px solid var(--arcana);
    animation: sigilPulse 1.8s ease-in-out infinite;
}

.loading-reliquary__sigil span:nth-child(2) { inset: 22px; animation-delay: -600ms; }
.loading-reliquary__sigil span:nth-child(3) { inset: 29px; background: var(--relic-bright); animation-delay: -1200ms; }

.loading-reliquary__eyebrow,
.logo-oath {
    color: var(--bone-300);
    font-family: var(--font-serif);
    font-size: .72rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.loading-reliquary h1 {
    margin: 8px 0 10px;
    color: var(--bone-100);
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 4vw, 2rem);
}

#loading-status {
    min-height: 1.5em;
    color: var(--arcana);
    font-size: .9rem;
}

.loading-track {
    height: 8px;
    margin-top: 22px;
    padding: 2px;
    border: 1px solid var(--relic-shadow);
    background: #050507;
}

.loading-track__fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--arcana-deep), var(--arcana), var(--relic-bright));
    box-shadow: 0 0 12px rgba(117,213,199,.6);
    transition: width var(--ui-medium) var(--ease-flight);
}

.loading-reliquary__count {
    margin-top: 8px;
    color: var(--ash-500);
    font-family: monospace;
    font-size: .75rem;
}

/* Santuario */
#main-menu {
    isolation: isolate;
    justify-content: center;
    min-height: 100%;
    padding: clamp(84px, 9vh, 112px) 24px 48px;
    background:
        linear-gradient(180deg, rgba(34,18,28,.18), rgba(5,5,7,.72)),
        url('assets/bg_battle.jpg') center 58% / cover no-repeat,
        var(--obsidian-950);
}

#main-menu::before {
    z-index: -1;
    opacity: 1;
    mix-blend-mode: normal;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(232,168,105,.2), transparent 28%),
        linear-gradient(90deg, rgba(6,5,7,.86), transparent 30% 70%, rgba(6,5,7,.86)),
        linear-gradient(180deg, transparent 45%, rgba(6,5,7,.9));
}

#main-menu::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.65) 100%);
}

.sanctuary-sky {
    position: fixed;
    inset: 0;
    z-index: -3;
    background: linear-gradient(180deg, #563647 0%, #b06f66 34%, #3b2830 62%, #08070b 100%);
}

.sanctuary-architecture {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.sanctuary-pillar {
    position: absolute;
    top: -5%;
    bottom: -8%;
    width: clamp(72px, 9vw, 160px);
    background:
        linear-gradient(90deg, #09070a, #31262a 18%, #514047 25%, #1d171a 34% 72%, #080608 85%),
        #171216;
    border-inline: 4px solid #080608;
    box-shadow: 0 0 0 2px rgba(196,154,82,.13), 20px 0 60px rgba(0,0,0,.65);
}

.sanctuary-pillar::before,
.sanctuary-pillar::after {
    content: '';
    position: absolute;
    left: -14px;
    right: -14px;
    height: 30px;
    border: 3px solid #161014;
    background: #3b2d32;
    box-shadow: inset 0 4px #5a4446, inset 0 -4px #110d10;
}

.sanctuary-pillar::before { top: 7%; }
.sanctuary-pillar::after { bottom: 5%; }
.sanctuary-pillar--left { left: -24px; }
.sanctuary-pillar--right { right: -24px; transform: scaleX(-1); }

.sanctuary-altar {
    position: absolute;
    left: 50%;
    bottom: -80px;
    width: min(60vw, 760px);
    height: 180px;
    transform: translateX(-50%);
    clip-path: polygon(12% 0, 88% 0, 100% 55%, 100% 100%, 0 100%, 0 55%);
    background:
        linear-gradient(90deg, transparent 49.5%, rgba(117,213,199,.28) 50%, transparent 50.5%),
        linear-gradient(180deg, #4c3b3d, #171115 45%, #080609);
    box-shadow: 0 -10px 40px rgba(196,154,82,.12);
}

.player-profile {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
    right: max(20px, env(safe-area-inset-right));
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    min-height: 42px;
    padding: 8px 16px;
    color: var(--bone-300);
    border: 1px solid rgba(196,154,82,.3);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    background: rgba(8,7,11,.84);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    font-size: .78rem;
    letter-spacing: .04em;
}

.player-profile strong { color: var(--relic-bright); }
.player-profile__name {
    padding-right: 16px;
    color: var(--bone-100);
    border-right: 1px solid rgba(196,154,82,.28);
    font-family: var(--font-title);
}

.sanctuary-menu {
    position: relative;
    z-index: 2;
    width: min(740px, 100%);
    margin: auto;
}

.logo-container {
    margin-bottom: clamp(24px, 4vh, 42px);
    animation: sanctuaryFloat 7s ease-in-out infinite;
}

.logo-mythos {
    color: var(--bone-300);
    text-shadow: 2px 2px 0 #08070b;
}

.logo-clash {
    color: var(--bone-100);
    background: linear-gradient(180deg, #fff7df 4%, #d1b77f 46%, #80572f 100%);
    -webkit-background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 4px 0 #1a1013) drop-shadow(0 10px 16px rgba(0,0,0,.75));
}

.logo-divider {
    display: flex;
    align-items: center;
    width: min(360px, 80%);
    margin: 14px auto 12px;
}

.logo-divider::before,
.logo-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--relic-gold));
}

.logo-divider::after { transform: scaleX(-1); }
.logo-divider span {
    width: 10px;
    height: 10px;
    margin: 0 12px;
    border: 2px solid var(--arcana);
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(117,213,199,.55);
}

.logo-oath {
    text-align: center;
    text-transform: none;
    letter-spacing: .12em;
}

.menu-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: none;
}

.menu-btn {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    min-height: 62px;
    padding: 8px 16px 8px 8px;
    overflow: hidden;
    color: var(--bone-100);
    border: 1px solid rgba(196,154,82,.42);
    border-radius: 0;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    background:
        linear-gradient(90deg, rgba(196,154,82,.08), transparent 45%),
        rgba(13,10,13,.92);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.015), 0 8px 24px rgba(0,0,0,.38);
    text-align: left;
    text-transform: none;
    transition: transform var(--ui-medium) var(--ease-impact), border-color var(--ui-fast), background var(--ui-fast), box-shadow var(--ui-medium);
}

.menu-btn::after {
    content: '';
    position: absolute;
    inset: 4px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.035);
    clip-path: inherit;
}

.menu-btn--wide { grid-column: 1 / -1; }
.menu-btn--primary {
    border-color: var(--relic-bright);
    background: linear-gradient(90deg, rgba(196,154,82,.2), transparent 55%), rgba(18,13,15,.96);
}

.menu-btn--relic {
    border-color: rgba(117,213,199,.62);
    background: linear-gradient(90deg, rgba(35,125,120,.22), transparent 55%), rgba(13,11,14,.95);
}

.menu-btn--quiet { opacity: .76; }
.menu-btn__sigil {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--relic-bright);
    border: 1px solid var(--relic-shadow);
    background: #0a080b;
    font-family: var(--font-serif);
    font-size: .72rem;
    transform: rotate(45deg);
}

.menu-btn__sigil::first-line { transform: rotate(-45deg); }
.menu-btn strong,
.menu-btn small { display: block; }
.menu-btn strong {
    font-family: var(--font-serif);
    font-size: .95rem;
    letter-spacing: .06em;
}
.menu-btn small {
    margin-top: 3px;
    color: var(--ash-500);
    font-size: .65rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.menu-btn:hover:not(:disabled):not(.disabled),
.menu-btn:focus-visible {
    z-index: 2;
    color: #fff9e8;
    border-color: var(--relic-bright);
    background: linear-gradient(90deg, rgba(196,154,82,.26), rgba(117,213,199,.08)), #171117;
    box-shadow: inset 0 0 24px rgba(196,154,82,.08), 0 14px 30px rgba(0,0,0,.5), 0 0 22px rgba(117,213,199,.1);
    transform: translate3d(0, -4px, 0);
}

.menu-btn:active:not(:disabled) { transform: translate3d(0, 1px, 0); }
.menu-btn:disabled,
.menu-btn.disabled {
    opacity: .38;
    cursor: not-allowed;
    text-decoration: none;
    filter: saturate(.3);
}

.version {
    position: fixed;
    right: 18px;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 3;
    color: rgba(205,191,158,.52);
    font-family: monospace;
    font-size: .68rem;
    letter-spacing: .08em;
}

/* Combate */
#battle-screen {
    background: #08070b;
}

#game-canvas {
    filter: saturate(.72) sepia(.1) contrast(1.08);
}

#battle-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(74,37,48,.18), transparent 30%, rgba(5,5,7,.35)),
        radial-gradient(ellipse at center, transparent 42%, rgba(2,2,3,.65) 100%);
    box-shadow: inset 0 0 120px rgba(0,0,0,.62);
}

#battle-fx-layer {
    position: absolute;
    inset: 0;
    z-index: 55;
    overflow: hidden;
    pointer-events: none;
}

#battle-ui { z-index: 10; }

.top-bar {
    align-items: flex-start;
    padding: max(14px, env(safe-area-inset-top)) 18px 12px;
    background: linear-gradient(180deg, rgba(6,5,7,.82), transparent);
}

.top-bar > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px !important;
}

.turn-indicator,
.ap-container,
.timer-container {
    min-height: 42px;
    padding: 9px 15px;
    color: var(--bone-100);
    border: 1px solid rgba(196,154,82,.42);
    border-radius: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    background: rgba(10,8,11,.86);
    box-shadow: inset 0 0 16px rgba(196,154,82,.04), 0 8px 22px rgba(0,0,0,.4);
    font-family: var(--font-serif);
    font-size: .9rem;
    letter-spacing: .08em;
    text-shadow: none;
}

.ap-container {
    color: var(--relic-bright);
    border-color: rgba(196,154,82,.6);
}

.ap-container::before { content: '◆'; color: var(--arcana); font-size: .8rem; }
.timer-container { color: var(--bone-300); border-color: rgba(165,50,58,.55); }

.turn-indicator[data-phase="enemy"] {
    color: #f0aaa0;
    border-color: rgba(165,50,58,.75);
    box-shadow: inset 0 0 18px rgba(165,50,58,.12), 0 8px 22px rgba(0,0,0,.4);
}

.top-bar .action-btn {
    min-height: 42px;
    margin: 0 !important;
    color: var(--bone-300);
    border-color: rgba(196,154,82,.3) !important;
    border-radius: 0 !important;
    background: rgba(10,8,11,.84) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.status-panel {
    top: 42%;
    gap: 7px;
}

.status-panel.heroes { left: 18px; }
.status-panel.enemies { right: 18px; }

.unit-status {
    width: min(220px, 22vw);
    min-width: 170px;
    padding: 10px;
    border-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    background: rgba(9,7,10,.83);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 18px rgba(255,255,255,.02);
    transition: transform var(--ui-fast), filter var(--ui-fast), opacity var(--ui-fast);
}

#enemies-status .unit-status {
    border-color: var(--blood) !important;
}

.action-btn.attack-btn {
    color: #17100a !important;
    border: 1px solid var(--relic-bright) !important;
    background: linear-gradient(180deg, #efd48d 0%, var(--relic-gold) 55%, #865a25 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #3e2917, 0 7px 14px rgba(0,0,0,.45) !important;
    animation: none !important;
}

.action-btn.attack-btn:hover:not(:disabled):not(.disabled) {
    color: #061310 !important;
    border-color: #d5fff8 !important;
    background: linear-gradient(180deg, #c8fff7, var(--arcana), var(--arcana-deep)) !important;
}

.action-btn.attack-btn:disabled,
.action-btn.attack-btn.disabled {
    color: var(--ash-300) !important;
    border-color: var(--ash-500) !important;
    background: linear-gradient(180deg, #403941, #211d24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 3px 0 #0b090c !important;
}

.unit-name {
    color: var(--bone-100);
    font-family: var(--font-serif);
    font-size: .78rem;
    letter-spacing: .04em;
}

.hp-bar-bg {
    height: 9px;
    border-color: rgba(241,232,210,.2);
    border-radius: 0;
    background: #08070b;
}

.hp-bar-fill {
    border-radius: 0;
    background: linear-gradient(90deg, #681d26, var(--blood), #d06a5e);
    box-shadow: 0 0 8px rgba(165,50,58,.5);
    transition: width 360ms var(--ease-flight);
}

.status-panel.enemies .hp-bar-fill {
    background: linear-gradient(90deg, #4f2333, #a74655, #d67872) !important;
}

.shield-indicator {
    border-color: var(--arcana) !important;
    border-radius: 0;
    box-shadow: inset 0 0 8px rgba(117,213,199,.35), 0 0 8px rgba(117,213,199,.55);
}

.bottom-bar {
    min-height: 270px;
    padding: 34px 18px 14px;
    background: linear-gradient(0deg, rgba(5,4,6,.98) 0%, rgba(8,6,9,.83) 42%, transparent 100%);
}

.cards-hand {
    align-items: flex-end;
    gap: 0;
}

.deck-card.card-in-hand {
    width: 156px !important;
    min-height: 224px !important;
    margin-inline: -10px !important;
    border: 2px solid var(--relic-shadow);
    border-radius: 2px 2px 10px 10px;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    background:
        radial-gradient(circle at 50% 34%, rgba(117,213,199,.12), transparent 28%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 4px, transparent 4px 8px),
        #171118;
    box-shadow: 0 12px 22px rgba(0,0,0,.65), inset 0 0 0 3px #0a080b;
    transform-origin: 50% 100%;
    transition: transform var(--ui-medium) var(--ease-impact), filter var(--ui-fast), box-shadow var(--ui-medium);
}

.deck-card.card-in-hand:hover,
.deck-card.card-in-hand:focus-visible {
    transform: translate3d(0, -34px, 0) scale(1.08) !important;
    border-color: var(--relic-bright);
    box-shadow: 0 22px 38px rgba(0,0,0,.74), 0 0 18px rgba(196,154,82,.22);
}

.card-top-bar,
.card-footer-bar {
    background: rgba(5,4,6,.72);
    border-color: rgba(196,154,82,.16);
}

.card-mana-gem { color: var(--relic-bright); }
.card-name-title { font-family: var(--font-serif); color: var(--bone-100); }
.card-art-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    height: 86px;
    margin: 7px 7px 2px;
    overflow: hidden;
    border: 1px solid hsl(var(--card-art-accent) 45% 52% / .42);
    background:
        radial-gradient(circle at var(--card-art-x) var(--card-art-y), hsl(var(--card-art-accent) 70% 66% / .48), transparent 15%),
        linear-gradient(145deg, hsl(var(--card-art-hue) 34% 19%), #08070b 74%);
    box-shadow: inset 0 0 24px rgba(0,0,0,.58);
}

.card-art-placeholder::before,
.card-art-placeholder::after {
    content: '';
    position: absolute;
    width: 58px;
    height: 58px;
    border: 1px solid hsl(var(--card-art-accent) 65% 66% / .3);
    transform: rotate(45deg);
}

.card-art-placeholder::after {
    width: 38px;
    height: 38px;
    border-style: dashed;
    animation: cardRelicTurn 12s linear infinite;
}

.card-art-placeholder__orbit {
    position: absolute;
    width: 74px;
    height: 28px;
    border: 1px solid hsl(var(--card-art-accent) 72% 70% / .34);
    border-radius: 50%;
    transform: rotate(-18deg);
}

.card-art-placeholder__rune {
    position: relative;
    z-index: 2;
    color: hsl(var(--card-art-accent) 72% 72%);
    font-family: var(--font-serif);
    font-size: 2.1rem;
    text-shadow: 0 0 15px hsl(var(--card-art-accent) 80% 60% / .72);
}

.card-art-placeholder__detail {
    position: absolute;
    right: 7px;
    bottom: 4px;
    color: hsl(var(--card-art-accent) 60% 72% / .55);
    font-size: .7rem;
}

.card-art-production {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    image-rendering: pixelated;
    transition: opacity 180ms ease;
}

.card-art-production.is-loaded { opacity: 1; }

.card-body-description p {
    color: var(--bone-300);
    border-radius: 0;
    border-color: rgba(196,154,82,.14);
    background: rgba(5,4,6,.52);
}

.pile,
.end-turn-btn {
    color: var(--bone-100);
    border: 1px solid rgba(196,154,82,.4);
    border-radius: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    background: rgba(10,8,11,.88);
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
}

.end-turn-btn {
    margin-top: 10px;
    padding: 12px 20px;
    color: #17100d;
    border-color: var(--relic-bright);
    background: linear-gradient(180deg, var(--relic-bright), var(--relic-gold));
    text-shadow: none;
}

.end-turn-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #ffe7a0, var(--relic-gold));
    box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 18px rgba(196,154,82,.35);
}

.battle-float {
    position: absolute;
    min-width: 48px;
    padding: 4px 7px;
    color: #fff8df;
    border: 1px solid rgba(241,232,210,.35);
    background: rgba(8,7,11,.86);
    box-shadow: 3px 3px 0 rgba(0,0,0,.6);
    font-family: 'Press Start 2P', monospace;
    font-size: .72rem;
    text-align: center;
    transform: translate(-50%, -50%);
    animation: floatDamage 700ms var(--ease-flight) forwards;
}

.battle-float--damage { color: #ff8c7d; border-color: var(--blood); }
.battle-float--heal { color: #c5ee9a; border-color: var(--venom); }
.battle-float--shield { color: #a7f1ea; border-color: var(--arcana-deep); }
.battle-float--status { color: var(--relic-bright); }

.battle-slash {
    position: absolute;
    width: 96px;
    height: 8px;
    border-top: 3px solid #fff8df;
    border-bottom: 2px solid var(--arcana);
    filter: drop-shadow(0 0 7px rgba(117,213,199,.9));
    transform: translate(-50%, -50%) rotate(-32deg) scaleX(.15);
    animation: battleSlash 260ms var(--ease-impact) forwards;
}

.battle-card-cast {
    position: absolute;
    left: 50%;
    top: 43%;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 210px;
    min-height: 280px;
    padding: 34px 22px;
    opacity: 0;
    color: var(--bone-100);
    border: 2px solid var(--relic-bright);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    background:
        radial-gradient(circle at 50% 45%, rgba(117,213,199,.2), transparent 32%),
        repeating-linear-gradient(45deg, rgba(196,154,82,.035) 0 3px, transparent 3px 8px),
        #120e13;
    box-shadow: 0 30px 70px rgba(0,0,0,.8), inset 0 0 0 5px #08070b, inset 0 0 0 6px rgba(196,154,82,.4);
    text-align: center;
    pointer-events: none;
    transform: translate(-50%, -35%) scale(.6) rotate(-3deg);
    transition: opacity 180ms ease, transform 360ms var(--ease-impact);
}

.battle-card-cast.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
}

.battle-card-cast__type {
    color: var(--arcana);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.battle-card-cast__name {
    font-family: var(--font-title);
    font-size: 1.3rem;
    line-height: 1.4;
}

.battle-card-cast__ornament {
    width: 42px;
    height: 42px;
    border: 2px solid var(--relic-gold);
    transform: rotate(45deg);
    box-shadow: inset 0 0 12px rgba(117,213,199,.32);
}

.battle-banner {
    position: absolute;
    left: 50%;
    top: 19%;
    z-index: 75;
    min-width: min(520px, 76vw);
    padding: 14px 34px;
    opacity: 0;
    color: var(--bone-100);
    border-block: 1px solid var(--relic-gold);
    background: linear-gradient(90deg, transparent, rgba(8,7,11,.94) 18% 82%, transparent);
    font-family: var(--font-title);
    font-size: clamp(1rem, 2.3vw, 1.8rem);
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
    transform: translate(-50%, -14px);
    transition: opacity 180ms ease, transform var(--ui-medium) var(--ease-flight);
    pointer-events: none;
}

.battle-banner.is-visible { opacity: 1; transform: translate(-50%, 0); }
.battle-banner[data-kind="enemy"] { color: #e59a8f; border-color: var(--blood); }
.battle-banner[data-kind="victory"] { color: var(--relic-bright); }
.battle-banner[data-kind="defeat"] { color: #ef8d84; border-color: var(--blood); }

.skip-animation-btn {
    position: absolute;
    right: 18px;
    top: 72px;
    z-index: 90;
    padding: 8px 12px;
    color: var(--bone-300);
    border: 1px solid var(--ash-500);
    background: rgba(8,7,11,.9);
    font: 600 .72rem var(--font-ui);
    letter-spacing: .06em;
    cursor: pointer;
}

body.presentation-busy #battle-ui {
    filter: saturate(.78);
}

body.presentation-busy #battle-ui button,
body.presentation-busy .card-in-hand {
    pointer-events: none;
}

@keyframes loadingVeil {
    to { transform: scale(1.035) translateY(-1%); filter: hue-rotate(5deg); }
}

@keyframes sigilPulse {
    0%, 100% { opacity: .35; box-shadow: 0 0 0 rgba(117,213,199,0); }
    50% { opacity: 1; box-shadow: 0 0 14px rgba(117,213,199,.5); }
}

@keyframes sanctuaryFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes floatDamage {
    0% { opacity: 0; transform: translate(-50%, -10%) scale(.7); }
    18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(.92); }
}

@keyframes battleSlash {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-32deg) scaleX(.15); }
    35% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(-32deg) scaleX(1.25); }
}

@keyframes cardRelicTurn {
    to { transform: rotate(405deg); }
}

@media (max-width: 900px) {
    .player-profile {
        width: calc(100% - 40px);
        justify-content: center;
        gap: 10px;
        font-size: .68rem;
    }

    .sanctuary-menu { width: min(620px, 100%); }
    .menu-btn { min-height: 56px; }
    .menu-btn small { display: none; }
    .status-panel { top: 36%; }
    .unit-status { min-width: 145px; width: 24vw; }
    .deck-card.card-in-hand { width: 132px !important; min-height: 194px !important; margin-inline: -18px !important; }
    .bottom-bar { min-height: 230px; }
}

@media (max-width: 640px) {
    #main-menu { justify-content: flex-start; padding-top: 82px; }
    .player-profile span:not(.player-profile__name) { font-size: 0; }
    .player-profile span:not(.player-profile__name) strong { font-size: .68rem; }
    .menu-buttons { grid-template-columns: 1fr; }
    .menu-btn--wide { grid-column: auto; }
    .sanctuary-pillar { opacity: .45; }
    .logo-clash { font-size: clamp(2rem, 11vw, 3.2rem); }
    .status-panel { top: 28%; }
    .unit-status { min-width: 128px; width: 38vw; padding: 7px; }
    .unit-status .attack-btn { font-size: .65rem !important; padding: 3px 6px !important; }
    .bottom-bar { padding-inline: 8px; overflow-x: auto; }
    .deck-controls { display: none !important; }
    .deck-card.card-in-hand { width: 116px !important; min-height: 174px !important; }
    .card-body-description { display: none; }
    .top-bar { padding-inline: 8px; }
    .top-bar .action-btn { display: none; }
    .turn-indicator, .ap-container, .timer-container { min-height: 34px; padding: 7px 9px; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .menu-btn:hover:not(:disabled):not(.disabled),
    .deck-card.card-in-hand:hover {
        transform: none !important;
    }
}