/* ============================================================
   DUEL THEME — Yu-Gi-Oh inspired visual layer.
   Cosmetic only: loaded after style.css, never changes layout.
   Delete the <link> in index.html to turn it off.
============================================================ */

:root {
    --duel-gold: #d9b25f;
    --duel-gold-hi: #fff1c1;
    --duel-gold-lo: #7a5a22;
    --duel-player: #4d8dff;
    --duel-enemy: #e0434f;
    --duel-effect: #d0702e;  /* effect monster orange */
    --duel-spell: #1f9c7a;   /* spell card green */
    --duel-trap: #b04d8a;    /* trap card magenta */
    --duel-font: Cinzel, Georgia, "Times New Roman", serif;
}

/* ---------- Headline typography ---------- */

.secondary-header h2,
.settings-header h1,
.auth-panel h1,
.game-mode-card strong,
#main-menu .menu-button-content strong,
#battle-screen .round-display strong,
#battle-screen #selected-character,
#battle-screen .ability-name,
#battle-screen .battle-message {
    font-family: var(--duel-font) !important;
    font-weight: 700;
}

.secondary-header h2,
.settings-header h1,
.auth-panel h1 {
    background: linear-gradient(180deg, var(--duel-gold-hi), var(--duel-gold) 55%, var(--duel-gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.8));
}

.section-eyebrow { color: rgba(217,178,95,.7) !important; }

/* ---------- Gold-trimmed buttons ---------- */

#main-menu .menu-button,
.game-mode-card.available,
.start-battle-button,
.back-button {
    border-color: rgba(217,178,95,.45) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.6),
        inset 0 0 0 2px rgba(217,178,95,.18),
        0 10px 30px rgba(0,0,0,.45) !important;
}

#main-menu .menu-button:not(.locked):hover,
.game-mode-card.available:hover,
.start-battle-button:not(:disabled):hover,
.back-button:hover {
    border-color: var(--duel-gold-hi) !important;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.6),
        inset 0 0 0 2px rgba(255,241,193,.35),
        0 0 24px rgba(217,178,95,.35),
        0 12px 34px rgba(0,0,0,.5) !important;
}

#main-menu .menu-button-symbol { color: var(--duel-gold) !important; text-shadow: 0 0 10px rgba(217,178,95,.7) !important; }

.start-battle-button:not(:disabled) {
    font-family: var(--duel-font);
    color: #1a1206 !important;
    background: linear-gradient(180deg, var(--duel-gold-hi), var(--duel-gold) 50%, var(--duel-gold-lo)) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* ---------- Collection: rarity foil like real cards ---------- */

.collection-card { --foil-glow: rgba(255,255,255,.12); }
.collection-card:has([data-rarity="RARE"])        { --foil-glow: rgba(200,210,225,.35); }
.collection-card:has([data-rarity="SUPER RARE"])  { --foil-glow: rgba(90,170,255,.45); }
.collection-card:has([data-rarity="EPIC"])        { --foil-glow: rgba(180,100,255,.5); }
.collection-card:has([data-rarity="MYTHIC"])      { --foil-glow: rgba(255,80,110,.5); }
.collection-card:has([data-rarity="LEGENDARY"])   { --foil-glow: rgba(255,200,90,.6); }
.collection-card:has([data-rarity="SINGULARITY"]) { --foil-glow: rgba(255,255,255,.6); }

.collection-grid > .collection-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 18px var(--foil-glow),
        0 16px 45px rgba(0,0,0,.42) !important;
}

.collection-grid > .collection-card:hover {
    border-color: var(--duel-gold) !important;
    box-shadow:
        0 0 34px var(--foil-glow),
        0 22px 55px rgba(0,0,0,.54) !important;
}

/* Holographic sheen: always on for top rarities, on hover for the rest. */
.collection-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: color-dodge;
    background:
        linear-gradient(115deg,
            transparent 20%,
            rgba(255,0,140,.35) 35%,
            rgba(255,230,0,.35) 45%,
            rgba(0,255,170,.35) 55%,
            rgba(0,140,255,.35) 65%,
            transparent 80%);
    background-size: 250% 250%;
    transition: opacity .3s ease;
}

.collection-card:hover::after { opacity: .55; animation: duel-foil 2.4s linear infinite; }

.collection-card:has([data-rarity="LEGENDARY"])::after,
.collection-card:has([data-rarity="SINGULARITY"])::after {
    opacity: .3;
    animation: duel-foil 5s linear infinite;
}

@keyframes duel-foil {
    from { background-position: 100% 100%; }
    to   { background-position: 0% 0%; }
}

#team-card-grid > .collection-card.selected {
    border-color: var(--duel-gold-hi) !important;
    box-shadow: 0 0 0 2px var(--duel-gold), 0 0 32px rgba(217,178,95,.55) !important;
}

/* ---------- Duel field: monster zones under every card ---------- */

#battle-screen .battle-card { isolation: isolate; }

#battle-screen .battle-card::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 12px;
    pointer-events: none;
    border: 1px solid var(--zone-color, var(--duel-gold));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--zone-color, var(--duel-gold)) 14%, transparent), transparent 60%);
    box-shadow:
        inset 0 0 14px color-mix(in srgb, var(--zone-color, var(--duel-gold)) 35%, transparent),
        0 0 14px color-mix(in srgb, var(--zone-color, var(--duel-gold)) 30%, transparent);
}

#battle-screen .player-team .battle-card { --zone-color: var(--duel-player); }
#battle-screen .enemy-team  .battle-card { --zone-color: var(--duel-enemy); }

/* Selected monster: golden summon aura. */
#battle-screen .battle-card.selected::before {
    --zone-color: var(--duel-gold-hi);
    animation: duel-aura 1.4s ease-in-out infinite;
}

/* Valid attack target: red lock-on pulse. */
#battle-screen .battle-card.targetable { cursor: crosshair; }
#battle-screen .battle-card.targetable::before {
    --zone-color: #ff3b3b;
    animation: duel-lock 0.9s ease-in-out infinite;
}

#battle-screen .battle-card.dead::before { --zone-color: #555; box-shadow: none; }

@keyframes duel-aura {
    50% { box-shadow: inset 0 0 18px rgba(255,241,193,.5), 0 0 30px rgba(255,220,140,.7); }
}

@keyframes duel-lock {
    50% { inset: -10px; box-shadow: inset 0 0 18px rgba(255,59,59,.5), 0 0 28px rgba(255,59,59,.8); }
}

/* ---------- HUD ---------- */

#battle-screen.active #turn-indicator {
    font-family: var(--duel-font);
    font-weight: 900;
    font-size: clamp(13px, 1.6vw, 22px);
    letter-spacing: .14em;
    background: linear-gradient(180deg, var(--duel-gold-hi), var(--duel-gold) 55%, var(--duel-gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.9));
}

#battle-screen .battle-topbar {
    border-bottom: 1px solid rgba(217,178,95,.4) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 10px 35px rgba(0,0,0,.4) !important;
}

/* Energy readout styled like a Life Points counter. */
#battle-screen .side-energy-gauge strong {
    font-family: var(--duel-font);
    font-variant-numeric: tabular-nums;
    color: var(--duel-gold-hi) !important;
    text-shadow: 0 0 10px rgba(217,178,95,.6) !important;
}

#battle-screen.active .battle-message {
    border-color: rgba(217,178,95,.55) !important;
    color: var(--duel-gold-hi) !important;
}

/* ---------- Ability buttons coloured like card types ---------- */

#battle-screen .ability-button.ability-normal { --type-color: var(--duel-effect); }
#battle-screen .ability-button.ability-skill  { --type-color: var(--duel-spell); }
#battle-screen .ability-button.ability-burst  { --type-color: var(--duel-trap); }

#battle-screen.active .ability-button {
    border-left: 4px solid var(--type-color, var(--duel-gold)) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--type-color, var(--duel-gold)) 28%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(40,36,30,.6), rgba(14,12,10,.95)) !important;
}

#battle-screen.active .ability-button .ability-cost {
    color: var(--duel-gold-hi) !important;
    font-weight: 800;
}

/* ---------- Card zoom modal ---------- */

#modal-card-image,
.hq-card-inspection-image {
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--duel-gold), 0 0 50px rgba(217,178,95,.45), 0 30px 80px rgba(0,0,0,.8);
}

/* ---------- "DUEL!" splash each time a battle opens ---------- */

#battle-screen.active .battle-arena::after {
    content: "DUEL!";
    position: absolute;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    pointer-events: none;
    font-family: var(--duel-font);
    font-weight: 900;
    font-size: clamp(64px, 14vw, 200px);
    letter-spacing: .08em;
    color: var(--duel-gold-hi);
    text-shadow: 0 0 30px rgba(217,178,95,.9), 0 6px 0 var(--duel-gold-lo), 0 12px 40px #000;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
    animation: duel-splash 1.4s 2.1s ease-out both;
}

@keyframes duel-splash {
    0%   { opacity: 0; transform: scale(2.2); }
    25%  { opacity: 1; transform: scale(1); }
    70%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.1); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .collection-card::after,
    #battle-screen .battle-card::before { animation: none !important; }
    #battle-screen.active .battle-arena::after { display: none; }
}


/* ============================================================
   DUEL ANIMATIONS — Master Duel style, driven by js/fx.js.
   The card itself leaves its zone, attacks and returns.
============================================================ */

#fx-layer { perspective: 1100px; }

/* Copy of a card that flies while the real one is hidden. */
#fx-layer .fx-ghost {
    border-radius: 8px;
    transform-style: preserve-3d;
    will-change: transform;
}

#fx-layer .fx-ghost img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    backface-visibility: hidden;
    box-shadow: 0 0 0 2px var(--duel-gold), 0 0 30px var(--c), 0 30px 60px rgba(0,0,0,.75);
}

/* Classic swirl card back, seen while the card flips. */
#fx-layer .fx-ghost::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background:
        radial-gradient(ellipse 30% 40% at 50% 50%, #ffe39a 0 6%, #c0601c 7% 26%, #1a0d05 27% 31%, transparent 32%),
        repeating-radial-gradient(circle at 50% 50%, #4a2810 0 7px, #26130a 7px 14px);
    box-shadow: inset 0 0 0 4px #b8862b, inset 0 0 0 7px #1a0d05, 0 0 30px var(--c);
}

/* Attack: lift → hover → wind-up → slam (84%) → recoil → return. */
#fx-layer .fx-ghost.attack { animation: fx-attack var(--dur) cubic-bezier(.45,0,.2,1) forwards; }
#fx-layer .fx-ghost.attack img { animation: fx-attack-glow var(--dur) linear forwards; }

@keyframes fx-attack {
    0%   { transform: translate(0px, 0px) rotateZ(0deg) rotateY(0deg) rotateX(0deg) scale(1); }
    12%  { transform: translate(0px, calc(var(--lift) * -.7)) rotateZ(0deg) rotateY(0deg) rotateX(18deg) scale(1.16); }
    45%  { transform: translate(0px, calc(var(--lift) * -1)) rotateZ(0deg) rotateY(var(--spin)) rotateX(10deg) scale(1.22); }
    70%  { transform: translate(calc(var(--dx) * -.1), calc(var(--dy) * -.1 - var(--lift))) rotateZ(var(--tilt)) rotateY(var(--spin)) rotateX(6deg) scale(1.28); }
    84%  { transform: translate(calc(var(--dx) * .8), calc(var(--dy) * .8)) rotateZ(calc(var(--tilt) * -1)) rotateY(var(--spin)) rotateX(0deg) scale(1.05); }
    90%  { transform: translate(calc(var(--dx) * .64), calc(var(--dy) * .64)) rotateZ(0deg) rotateY(var(--spin)) rotateX(0deg) scale(1.12); }
    100% { transform: translate(0px, 0px) rotateZ(0deg) rotateY(var(--spin)) rotateX(0deg) scale(1); }
}

@keyframes fx-attack-glow {
    0%       { filter: brightness(1); }
    70%      { filter: brightness(1.35); }
    84%      { filter: brightness(2.6); }
    92%,100% { filter: brightness(1); }
}

/* Summon: drops in face-down, flips face-up into its zone. */
#fx-layer .fx-ghost.summon { animation: fx-summon 900ms cubic-bezier(.2,.8,.2,1) both; }
#fx-layer .fx-ghost.summon img { animation: fx-summon-glow 900ms ease-out both; }

@keyframes fx-summon {
    0%   { transform: translateY(-90px) rotateY(180deg) scale(.45); opacity: 0; }
    20%  { opacity: 1; }
    60%  { transform: translateY(8px) rotateY(8deg) scale(1.1); opacity: 1; }
    100% { transform: translateY(0px) rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes fx-summon-glow {
    0%,45% { filter: brightness(3.5); }
    100%   { filter: brightness(1); }
}

/* Spinning magic circle on the floor under a card. */
#fx-layer .fx-circle {
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(70deg);
    filter: drop-shadow(0 0 10px var(--c));
    animation: fx-circle var(--dur) ease forwards;
}

#fx-layer .fx-circle::before,
#fx-layer .fx-circle::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

#fx-layer .fx-circle::before {
    inset: 0;
    border: 3px solid var(--c);
    background: repeating-conic-gradient(var(--c) 0 3deg, transparent 3deg 20deg);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 59% 70%, transparent 71% 86%, #000 87%);
    mask: radial-gradient(circle, transparent 58%, #000 59% 70%, transparent 71% 86%, #000 87%);
    animation: fx-spin 4s linear infinite;
}

#fx-layer .fx-circle::after {
    inset: 22%;
    border: 2px dashed var(--c2);
    box-shadow: 0 0 16px var(--c), inset 0 0 16px var(--c);
    animation: fx-spin 2.5s linear infinite reverse;
}

@keyframes fx-circle {
    0%   { opacity: 0; scale: .3; }
    12%  { opacity: 1; scale: 1; }
    80%  { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1.3; }
}

@keyframes fx-spin { to { rotate: 360deg; } }

/* Anime cut-in banner with the attack name. */
#fx-layer .fx-cutin {
    left: -5vw;
    top: 50%;
    width: 110vw;
    height: clamp(80px, 16vh, 150px);
    margin-top: calc(clamp(80px, 16vh, 150px) / -2);
    display: flex;
    align-items: center;
    overflow: hidden;
    transform: skewY(-6deg);
    border-block: 3px solid var(--c);
    background: linear-gradient(90deg, rgba(0,0,0,.94), rgba(12,9,18,.95) 55%, rgba(0,0,0,.7));
    box-shadow: 0 0 40px var(--c), 0 0 0 1px #000;
    animation: fx-cutin 1500ms cubic-bezier(.2,.9,.25,1) var(--delay) both;
}

/* Speed lines. */
#fx-layer .fx-cutin::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.08) 38px 40px);
    animation: fx-speed .3s linear infinite;
}

#fx-layer .fx-cutin-art {
    position: relative;
    flex: 0 0 clamp(150px, 34vw, 480px);
    height: 100%;
    margin-left: 5vw;
    background-size: 125% auto;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    animation: fx-pan 1500ms linear var(--delay) both;
}

#fx-layer .fx-cutin-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 2vw;
    transform: skewY(6deg);
}

#fx-layer .fx-cutin-type {
    font: 800 clamp(10px, 1.2vw, 15px)/1 Cinzel, Georgia, serif;
    letter-spacing: .4em;
    color: var(--type);
    text-shadow: 0 0 12px var(--type);
}

#fx-layer .fx-cutin-name {
    font: 900 clamp(24px, 4.6vw, 66px)/1.05 Cinzel, Georgia, serif;
    letter-spacing: .05em;
    white-space: nowrap;
    background: linear-gradient(180deg, #fff7dc, #f0c868 55%, #8a6420);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 #000) drop-shadow(0 0 16px var(--c));
}

@keyframes fx-cutin {
    0%   { translate: -110% 0; }
    14%  { translate: 0 0; }
    82%  { translate: 2% 0; opacity: 1; }
    100% { translate: 110% 0; opacity: 0; }
}

@keyframes fx-speed { to { background-position: -80px 0; } }
@keyframes fx-pan { from { background-position: 50% 22%; } to { background-position: 50% 30%; } }

/* Burst darkens the field; every impact flashes the screen. */
#fx-layer .fx-darken {
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.88));
    animation: fx-darken var(--dur) ease forwards;
}

@keyframes fx-darken {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; }
}

#fx-layer .fx-flash {
    inset: 0;
    background: var(--c);
    mix-blend-mode: screen;
    animation: fx-flash 320ms ease-out both;
}

@keyframes fx-flash {
    from { opacity: var(--o); }
    to   { opacity: 0; }
}