/* KTK combat flow (cf1): one readable callout at a time, soft fades and eases only.
   No pops, sparks, shakes or scanlines. Presentation only. */
html .floater.show{animation:cf-rise .8s cubic-bezier(.25,.8,.3,1) forwards!important}
html .floater.floater-park.show,html .floater.floater-hp-damage.show,html .floater.fct-taken.floater-park.show{animation:cf-rise .8s cubic-bezier(.25,.8,.3,1) forwards!important}
@keyframes cf-rise{0%{opacity:0;transform:translate(-50%,-50%)}22%{opacity:1;transform:translate(-50%,-60%)}100%{opacity:1;transform:translate(-50%,-68%)}}
html .floater.floater-travel,html .floater.floater-travel.show{animation:none!important;transform:translate(-50%,-50%)}
html .floater:not(.floater-callout){filter:drop-shadow(0 2px 0 rgba(0,0,0,.85))!important}
html .floater .fct-spark,html .fct-burst{display:none!important}
html .floater.fade,html .fx-stamp.fade,html .floater-callout.fade{opacity:0!important;transition:opacity .26s ease-out!important}
html .fx-stamp.show{animation:cf-stamp .7s ease forwards!important}
@keyframes cf-stamp{0%{opacity:0;transform:translate(-50%,-120%)}25%{opacity:1;transform:translate(-50%,-130%)}100%{opacity:1;transform:translate(-50%,-134%)}}
html .fx-stamp .fct-t{filter:none!important}
html .clash-ribbon .clash-tag{font:700 .62rem/1 'Cinzel',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:#e9c574;
  padding:2px 6px;margin-right:2px;border:1px solid rgba(233,197,116,.45);border-radius:2px}
/* softer impacts / no screen jolt classes */
html .screen-shake,html .screen-shake-hard{animation:none!important}
html .element-particle{opacity:.7}
html .castle-shockwave{opacity:.45}
html .kt-impact{opacity:.6}
@media (prefers-reduced-motion:reduce){html .floater.show,html .fx-stamp.show{animation:none!important;opacity:1}}
/* ---- cf2: diegetic combat feedback. No floating plates/stingers/travelling numbers. ---- */
html .clash-ribbon,html .floater.floater-travel,html .fx-stamp,html .combat-outcome-badge,html .gy-card-flight-wins,
html .slot .card-face.v3 .v3-trump,html .slot[class*="trump-"] .card-face.v3 .v3-trump{display:none!important}
html{--cf2-fire:rgba(214,120,72,.85);--cf2-wind:rgba(222,212,182,.8);--cf2-water:rgba(120,168,210,.85);--cf2-earth:rgba(178,158,102,.85);--cf2-void:rgba(233,197,116,.8)}
/* values glow on the meeting cards */
html .slot.cf2-meet .card-face.v3 .v3-idx b,html .slot.cf2-meet .card-face.v3 .v3-val,html .slot.cf2-meet .card-face.v3 .rank,html .slot.cf2-meet .card-face.v3 .v3-castle em{
  text-shadow:0 0 6px var(--cf2-el),0 0 12px color-mix(in srgb,var(--cf2-el) 55%,transparent),0 1px 1px #000!important;
  animation:cf2-val var(--cf2-ms,900ms) ease-in-out both}
@keyframes cf2-val{0%{filter:brightness(1)}25%,75%{filter:brightness(1.35)}100%{filter:brightness(1)}}
html .slot.cf2-meet{position:relative}
html .slot.cf2-meet::after{content:"";position:absolute;inset:-3px;border-radius:10px;pointer-events:none;z-index:7;
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--cf2-el) 45%,transparent),inset 0 0 10px color-mix(in srgb,var(--cf2-el) 30%,transparent);
  animation:cf2-breathe var(--cf2-ms,900ms) ease-in-out both}
@keyframes cf2-breathe{0%{opacity:0}25%,70%{opacity:1}100%{opacity:0}}
/* blocked: soft suit-coloured ward shimmer on the defender */
html .slot.cf2-ward{position:relative}
html .slot.cf2-ward::before{content:"";position:absolute;inset:-2px;border-radius:10px;pointer-events:none;z-index:8;
  background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--cf2-el) 38%,transparent) 50%,transparent 70%) 0 0/250% 100% no-repeat,
    radial-gradient(closest-side,color-mix(in srgb,var(--cf2-el) 22%,transparent),transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cf2-el) 55%,transparent),0 0 16px color-mix(in srgb,var(--cf2-el) 35%,transparent);
  animation:cf2-ward var(--cf2-ms,1100ms) ease-in-out both}
@keyframes cf2-ward{0%{opacity:0;background-position:120% 0,0 0}20%{opacity:1}75%{opacity:.85;background-position:-20% 0,0 0}100%{opacity:0;background-position:-20% 0,0 0}}
/* trump: suit icon brightens with a soft element aura */
html .slot.cf2-trump .card-face.v3 .v3-idx i,html .slot.cf2-trump .card-face.v3 .suit,html .slot.cf2-trump .card-face.v3 .v3-ribbon i{
  text-shadow:0 0 5px var(--cf2-el),0 0 14px var(--cf2-el),0 0 24px color-mix(in srgb,var(--cf2-el) 50%,transparent)!important;
  animation:cf2-val var(--cf2-ms,1200ms) ease-in-out both}
html .slot.cf2-trump .card-face.v3::before{content:"";position:absolute;left:-12%;top:-8%;width:62%;height:42%;z-index:6;pointer-events:none;border-radius:50%;filter:blur(8px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--cf2-el) 50%,transparent),transparent);animation:cf2-breathe var(--cf2-ms,1200ms) ease-in-out both}
/* castle hit / kill */
html .slot.cf2-hit .card-face,html .slot.cf2-hit .card-back{animation:cf2-dimhit var(--cf2-ms,900ms) ease-in-out both}
@keyframes cf2-dimhit{0%,100%{filter:none}40%{filter:brightness(.82) saturate(.85)}}
html .slot.cf2-crack{position:relative}
html .slot.cf2-crack>*{animation:cf2-dim 1.1s ease-in forwards}
html .slot.cf2-crack::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:8px;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' fill='none' stroke='%23140d08' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M52 0 L47 22 L58 38 L44 61 L53 79 L40 104 L48 140'/%3E%3Cpath d='M47 22 L28 30 L18 48'/%3E%3Cpath d='M58 38 L78 46 L90 64'/%3E%3Cpath d='M44 61 L24 72'/%3E%3Cpath d='M53 79 L74 92 L80 116'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(0 0 1px rgba(233,197,116,.35));animation:cf2-crackin 1.1s ease-out forwards}
@keyframes cf2-dim{to{filter:brightness(.55) saturate(.5) sepia(.2)}}
@keyframes cf2-crackin{0%{opacity:0;clip-path:inset(0 0 100% 0)}60%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1}}
/* overflow: stat ticks with a small etched number beside it */
html .cf2-etch{position:fixed;z-index:60;pointer-events:none;transform:translateY(-50%);
  font:700 .78rem/1 'Cinzel',Georgia,serif;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#d9a089;
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 -1px 0 rgba(255,236,190,.08);opacity:0;animation:cf2-etch var(--cf2-ms,1500ms) ease-in-out forwards}
html .cf2-etch-hp{color:#e09382}
@keyframes cf2-etch{0%{opacity:0;transform:translate(-3px,-50%)}15%{opacity:1;transform:translate(0,-50%)}80%{opacity:1}100%{opacity:0}}
html .cf2-tick b{animation:cf2-tick .9s ease-in-out}
@keyframes cf2-tick{0%,100%{color:inherit}35%{color:#e2a08c}}
@media (prefers-reduced-motion:reduce){html .slot.cf2-meet::after,html .slot.cf2-ward::before,html .cf2-etch,html .slot.cf2-crack::after{animation-duration:.01ms!important;opacity:1}}
/* ---- cf2 SCT: retro + AIMAGEDDON glitch, crisp. No flash/scanlines. ---- */
@font-face{font-family:'KTK VT323';src:url('../../assets/fonts/VT323-Regular.ttf') format('truetype');font-display:block}
html .ktk-sct{position:fixed;z-index:61;pointer-events:none;white-space:nowrap;transform:translate(-50%,-100%);
  font:400 22px/1 'KTK VT323',monospace;letter-spacing:.06em;color:var(--sct-c,#e6d6b0);
  text-shadow:-1px 0 rgba(200,60,60,.55),1px 0 rgba(70,190,200,.5),0 2px 0 rgba(0,0,0,.9);
  -webkit-font-smoothing:none;animation:sct-rise var(--sct-ms,700ms) cubic-bezier(.25,.8,.3,1) forwards}
html .ktk-sct.sct-fire{--sct-c:#e3a07a}html .ktk-sct.sct-wind{--sct-c:#e4dcc2}html .ktk-sct.sct-water{--sct-c:#9cc3e2}html .ktk-sct.sct-earth{--sct-c:#cdb985}html .ktk-sct.sct-void{--sct-c:#e6cf94}
html .ktk-sct.sct-block{--sct-c:#a9cbe0}html .ktk-sct.sct-dmg{--sct-c:#e39a88}
html .ktk-sct.sct-trump{letter-spacing:.14em}
html .ktk-sct.sct-jit::after{content:attr(data-t);position:absolute;left:0;top:0;color:inherit;text-shadow:inherit;clip-path:inset(42% 0 34% 0);animation:sct-slice var(--sct-ms,700ms) steps(1) forwards}
@keyframes sct-rise{0%{opacity:0;transform:translate(-50%,-90%)}15%{opacity:1;transform:translate(-50%,-100%)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-135%)}}
@keyframes sct-slice{0%,30%,48%,100%{transform:none}32%{transform:translateX(3px)}40%{transform:translateX(-2px)}}
html .ktk-sct.sct-out{opacity:0!important;transition:opacity .15s}
@media (max-width:700px),(orientation:landscape) and (max-height:520px){html .ktk-sct{font-size:18px}}
@media (prefers-reduced-motion:reduce){html .ktk-sct{animation-name:sct-fade}html .ktk-sct::after{display:none}}
@keyframes sct-fade{0%,100%{opacity:0}15%,75%{opacity:1}}
html .audio-control.sct-opt label{display:flex;gap:8px;align-items:center;cursor:pointer}
html .audio-control.sct-opt{display:block!important}html .audio-control.sct-opt label{white-space:nowrap}
html .ktk-sct.sct-call{font-size:20px;letter-spacing:.04em}