/* MYTHOS 0.5 — fantasy card table and treasury. Loaded last to own these surfaces. */

#battle-screen .deck-card.card-in-hand {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    height:258px;
    color:#332619!important;
    background:
        linear-gradient(105deg,transparent 0 48%,#fff8df22 49% 51%,transparent 52%),
        radial-gradient(circle at 50% -15%,#fff5cd,#dfc08d 58%,#aa7b43 120%)!important;
    border:3px double #a77b39!important;
    border-radius:12px 12px 7px 7px;
    box-shadow:0 7px 16px #050a076b,inset 0 0 0 1px #fff0b95c,inset 0 -22px 30px #6d3e1730!important;
    transform:none!important;
    transform-origin:50% 92%;
    transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms ease,filter 180ms ease;
}

#battle-screen .deck-card.card-in-hand::before {
    content:"";
    position:absolute;
    inset:3px;
    z-index:5;
    border:1px solid #6e4c24b8;
    border-radius:8px 8px 4px 4px;
    box-shadow:inset 0 0 0 2px #ebcf8c5c;
    pointer-events:none;
}

#battle-screen .deck-card.card-in-hand::after {
    content:"◆";
    position:absolute;
    z-index:6;
    left:50%;
    bottom:1px;
    translate:-50% 0;
    color:#805826;
    font:8px Georgia,serif;
    text-shadow:-62px 0 #805826,62px 0 #805826;
    pointer-events:none;
}

#battle-screen .card-in-hand .card-top-bar {
    position:relative;
    z-index:3;
    min-height:29px;
    padding:3px 7px 3px 5px!important;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    color:#fff7dc!important;
    background:linear-gradient(180deg,#49351f,#1c1711)!important;
    border-bottom:2px ridge #e1bd6c;
    text-shadow:0 1px 2px #000;
}

#battle-screen .card-in-hand .card-mana-gem {
    min-width:52px;
    min-height:24px;
    display:inline-grid;
    place-items:center;
    padding:2px 7px;
    color:#fffde8!important;
    background:radial-gradient(circle at 35% 25%,#d9fbff 0 8%,#218eaa 28%,#075068 62%,#022734 100%)!important;
    border:2px solid #f0d187;
    border-radius:999px;
    box-shadow:inset 0 0 0 1px #d9fbff6e,0 0 0 1px #311c0e,0 2px 6px #000b;
    font:700 11px/1 Georgia,serif!important;
    text-shadow:0 1px 2px #001b24;
    white-space:nowrap;
}

#battle-screen .card-in-hand .card-type-tag {
    max-width:88px;
    padding:3px 6px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff4d2!important;
    border:1px solid #e5c77f;
    border-radius:2px 8px 2px 8px;
    background:#211a13!important;
    font:700 9px/1.2 Georgia,serif!important;
    letter-spacing:.07em;
    text-transform:uppercase;
}

#battle-screen .card-in-hand.type-support .card-type-tag {background:#225249!important}
#battle-screen .card-in-hand.type-aoe .card-type-tag {background:#7c3028!important}
#battle-screen .card-in-hand.type-summon .card-type-tag {background:#513b70!important}
#battle-screen .card-in-hand.type-ultimate .card-type-tag {background:#76551c!important}

#battle-screen .card-in-hand .card-art-placeholder {
    height:82px;
    min-height:82px;
    margin:4px 7px 0;
    border:2px ridge #9b743c;
    border-radius:5px 5px 1px 1px;
    background:#1a2824;
    box-shadow:inset 0 0 12px #0009;
}

#battle-screen .card-in-hand .card-art-production {filter:saturate(.9) contrast(1.04)}

#battle-screen .card-in-hand .card-header-area {
    min-height:32px;
    margin:0 7px;
    padding:4px 7px 3px!important;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(90deg,#96703b,#f1d89e 13% 87%,#96703b);
    border:1px solid #8a622f;
    border-top:0;
    box-shadow:inset 0 1px #fff1c888;
}

#battle-screen .card-in-hand .card-name-title {
    overflow:hidden;
    color:#302116;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    font:700 12px/1.05 Georgia,serif!important;
    letter-spacing:.015em;
    text-align:center;
    white-space:normal;
}

#battle-screen .card-in-hand .card-hero-class {display:none}

#battle-screen .card-in-hand .card-body-description {
    flex:1;
    min-height:35px;
    margin:3px 7px 0;
    padding:4px 6px!important;
    overflow:hidden;
    background:#ead7adcc!important;
    border:1px solid #9b7846;
    border-bottom:0;
}

#battle-screen .card-in-hand .card-body-description p {
    margin:0;
    color:#36291e!important;
    font:10px/1.22 Georgia,serif!important;
    text-align:left;
}

#battle-screen .card-in-hand .card-target-line {
    flex:0 0 auto;
    min-height:43px;
    overflow:visible;
    overflow-wrap:anywhere;
    text-overflow:clip;
    margin:0 7px 7px;
    padding:4px 5px;
    display:grid;
    place-items:center;
    color:#e9ddbb;
    background:linear-gradient(#344c40,#23382f);
    border:1px solid #9c804c;
    border-top-color:#c3a566;
    border-radius:0 0 4px 4px;
    font:10px/1.12 Georgia,serif;
    white-space:normal;
}

#battle-screen .deck-card.card-in-hand.disabled {
    color:#463b2d!important;
    background:linear-gradient(#cfbd96,#aa9571)!important;
    border-color:#827158!important;
    filter:saturate(.62);
}

#battle-screen .card-details-btn {
    min-height:27px;
    color:#eaddb9;
    background:linear-gradient(#3e5548,#26392f);
    border:1px solid #ad915d;
    border-radius:2px 2px 7px 7px;
    font:11px Georgia,serif;
    transition:background-color 140ms ease,box-shadow 140ms ease,color 140ms ease;
}

@media (hover:hover) {
    #battle-screen .card-details-btn:hover:not(:disabled) {
        color:#fff4cf;
        background:#476d5b;
        box-shadow:0 0 0 2px #e3c678,0 0 14px #d8b85d80;
    }
}

#battle-screen .card-details-btn:focus-visible,
#battle-screen .deck-card.card-in-hand:focus-visible {
    outline:3px solid #fff0a5;
    outline-offset:3px;
}

#battle-screen .card-details-btn:focus-visible {
    color:#fff4cf;
    background:#476d5b;
    box-shadow:0 0 0 2px #e3c678,0 0 14px #d8b85d80;
}

@media (min-width:1100px) and (min-height:501px) {
    #battle-screen .bottom-bar:has(.card-in-hand:hover),
    #battle-screen .bottom-bar:focus-within {z-index:51}

    #battle-screen .cards-hand {
        align-items:flex-start;
        justify-content:center;
        gap:0;
        padding:4px 18px 0;
        overflow:visible;
        perspective:1200px;
    }

    #battle-screen .hand-slot {
        position:relative;
        flex:0 0 174px;
        width:174px;
        min-width:174px;
        margin-inline:-8px;
        transform:translateY(var(--fan-rise,0)) rotate(var(--fan-angle,0deg));
        transform-origin:50% 100%;
        z-index:var(--fan-order,1);
        transition:transform 180ms ease;
    }

    #battle-screen .hand-slot:hover,
    #battle-screen .hand-slot:focus-within {z-index:60}

    #battle-screen .hand-slot .deck-card.card-in-hand:hover,
    #battle-screen .hand-slot .deck-card.card-in-hand:focus-visible {
        transform:translateY(-34px) rotate(calc(var(--fan-angle,0deg) * -1)) scale(1.045)!important;
        filter:saturate(1.08) brightness(1.04);
        box-shadow:0 20px 32px #020604bd,0 0 0 2px #ffe69b,0 0 30px #f2c967a8,inset 0 0 0 1px #fff0b95c!important;
    }
}

@media (max-width:1099px), (max-height:500px) {
    #battle-screen .hand-slot {
        margin:0;
        transform:none!important;
    }

    #battle-screen .deck-card.card-in-hand:hover,
    #battle-screen .deck-card.card-in-hand:focus-visible {
        transform:none!important;
        box-shadow:0 7px 16px #050a076b,inset 0 0 0 1px #fff0b95c,inset 0 -22px 30px #6d3e1730!important;
    }
}

@media (prefers-reduced-motion:reduce) {
    #battle-screen .hand-slot,
    #battle-screen .deck-card.card-in-hand {transition:none!important}
}

/* Treasury */
#chests-screen {
    justify-content:flex-start;
    gap:12px;
    padding:22px clamp(16px,4vw,52px) 18px!important;
    overflow-y:auto;
}

.treasury-heading {max-width:720px;text-align:center;color:#57452e}
.treasury-heading .screen-title {margin:0;color:#5b2b25!important;font-size:clamp(30px,4vw,48px)}
.treasury-heading>p:last-child {margin:4px 0 0;font:15px/1.4 Georgia,serif}
.treasury-kicker {margin:0 0 2px;color:#87682e;font:700 11px Georgia,serif;letter-spacing:.18em;text-transform:uppercase}

.treasury-layout {
    width:min(1040px,100%);
    margin:auto;
    display:grid;
    grid-template-columns:minmax(0,760px) 230px;
    gap:18px;
    align-items:start;
}

.treasury-reliquary.glass-panel {
    padding:14px 16px 16px;
    text-align:center;
    color:#392b20;
    background:linear-gradient(135deg,#ead8b7e8,#caa775e8)!important;
    border:2px ridge #8d6939!important;
    border-radius:8px;
    box-shadow:0 16px 34px #35251845,inset 0 0 0 2px #fff0c15c!important;
}

#chests-screen .sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
}

.treasury-scene {
    position:relative;
    width:min(100%,640px);
    aspect-ratio:4/3;
    margin:0 auto 9px;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:radial-gradient(ellipse at 50% 70%,#69512c,#251f1a 72%);
    border:3px ridge #a98445;
    border-radius:5px;
    box-shadow:inset 0 0 38px #090806d9,0 5px 14px #2b1a1066;
}

.treasury-scene canvas {display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.treasury-scene canvas[hidden],.treasury-fallback[hidden] {display:none}
.treasury-fallback {width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 62%,#72552c,#201b17 68%)}
.treasury-fallback svg {width:34%;height:56%;filter:drop-shadow(0 10px 18px #000c)}
.treasury-scene.is-opening .treasury-fallback {filter:brightness(1.12)}
.treasury-scene.is-revealed {box-shadow:inset 0 0 38px #8f671e66,0 0 26px #d7a93b7a}

.treasury-stock {margin:2px 0 8px;font:15px Georgia,serif}
.treasury-stock strong {color:#6e3b20;font-size:23px}
.treasury-quantity {display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 7px}
.treasury-quantity .action-btn {min-width:42px;min-height:38px;padding:5px 10px!important;font-size:17px!important}
.treasury-quantity #btn-chest-max {font-size:12px!important}
#chest-open-count {min-width:48px;padding:4px 9px;color:#3e2a19;background:#f4e3bc;border:1px solid #8f6a39;border-radius:50%;font:700 20px Georgia,serif}
.treasury-cost-line {margin:0 0 8px;color:#69543a;font:12px Georgia,serif;text-transform:uppercase;letter-spacing:.08em}
.treasury-cost-line strong {color:#4b2c1d}
.treasury-open.action-btn {min-width:min(320px,100%);min-height:48px;padding:10px 24px!important;color:#fff0cb!important;background:linear-gradient(#8c4936,#5e2924)!important;border:1px solid #d0a05e!important;font:700 16px Georgia,serif!important}
.treasury-open.action-btn:disabled {color:#a99c84!important;background:#5b554a!important;border-color:#777066!important}
.treasury-reward {min-height:26px;margin:9px auto 0;max-width:660px;color:#4b2a1b;font:700 13px/1.4 Georgia,serif}

.treasury-ledger {display:flex;flex-direction:column;gap:10px;min-width:0}
.treasury-balance.glass-panel {padding:18px 12px!important;text-align:center;background:#2d352dE8!important;border:1px solid #aa8f5f!important;border-radius:5px;color:#ead9b5}
.treasury-balance p {margin:0 0 7px;font:10px Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
.treasury-balance strong {display:block;font:700 28px Georgia,serif}
.treasury-balance--gold strong {color:#f0c568}
.treasury-balance--aura strong {color:#c5a7db}
.treasury-ledger-note {margin:0;padding:12px;color:#574630;background:#dbc8a3;border:1px solid #9c8154;font:12px/1.45 Georgia,serif;text-align:left}
.treasury-back.action-btn {min-height:40px;margin:0 auto;padding:7px 20px!important}

.treasury-quantity .action-btn,
.treasury-open.action-btn,
.treasury-back.action-btn {transition:transform 140ms ease,box-shadow 140ms ease,filter 140ms ease}

@media (hover:hover) {
    .treasury-quantity .action-btn:hover:not(:disabled),
    .treasury-open.action-btn:hover:not(:disabled),
    .treasury-back.action-btn:hover:not(:disabled) {
        transform:translateY(-2px);
        filter:brightness(1.08);
        box-shadow:0 0 0 2px #f0cf82,0 0 16px #b87a3080!important;
    }

    #chests-screen .treasury-open.action-btn:hover:not(:disabled) {
        color:#fff0cb!important;
        background:linear-gradient(#a35a40,#6f3028)!important;
        border-color:#f0cf82!important;
    }
}

.treasury-quantity .action-btn:focus-visible,
.treasury-open.action-btn:focus-visible,
.treasury-back.action-btn:focus-visible {
    outline:3px solid #6c392a;
    outline-offset:3px;
    box-shadow:0 0 0 2px #f0cf82,0 0 16px #b87a3080!important;
}

#chests-screen .treasury-open.action-btn:focus-visible {
    color:#fff0cb!important;
    background:linear-gradient(#8c4936,#5e2924)!important;
}

@media (max-width:760px) {
    #chests-screen {padding:14px 10px!important;gap:9px}
    .treasury-heading>p:last-child {font-size:13px}
    .treasury-layout {grid-template-columns:1fr;gap:10px}
    .treasury-reliquary.glass-panel {padding:9px}
    .treasury-scene {width:min(100%,430px);margin-bottom:7px}
    .treasury-ledger {display:grid;grid-template-columns:1fr 1fr;gap:7px}
    .treasury-balance.glass-panel {padding:10px!important}
    .treasury-balance strong {font-size:21px}
    .treasury-ledger-note {grid-column:1/-1;padding:8px;text-align:center}
}

@media (prefers-reduced-motion:reduce) {
    .treasury-scene,.treasury-fallback,
    .treasury-quantity .action-btn,.treasury-open.action-btn,.treasury-back.action-btn {transition:none!important}
}