/* ==========================================================================
   KTK v3 RESULTS SCREEN (presentation only). Big outcome title, plain-language
   score, You vs Enemy HP, animated rank change, best hit, damage bar.
   Victory = forged gold + canvas crest aura + embers + crown burst.
   Defeat = cool dark ember. Draw = neutral steel.
   Motion: transform/opacity only, no brightness flashes, reduced motion honored.
   ========================================================================== */
#modal{--res-a:#e9c574;--res-b:#fff0bf;--res-c:#a8742c;--res-glow:rgba(255,150,50,.34);--res-ink:#f1e6cf}
#modal.is-defeat{--res-a:#c7795e;--res-b:#f0cdb6;--res-c:#5c2a22;--res-glow:rgba(150,60,45,.26);--aftermath-accent:#8e4a3b}
#modal.is-draw{--res-a:#b9c3cc;--res-b:#eef3f7;--res-c:#5d6973;--res-glow:rgba(150,175,195,.2);--aftermath-accent:#7f8b95;--aftermath-glow:rgba(150,175,195,.2)}
#modal.is-defeat::after{background:radial-gradient(circle at 50% 30%,rgba(120,50,40,.22),transparent 45%),radial-gradient(circle at 50% 100%,rgba(30,50,70,.25),transparent 60%)}
#modal.is-draw::after{background:radial-gradient(circle at 50% 30%,rgba(150,170,190,.16),transparent 45%)}
#modal.is-victory::after{background:radial-gradient(circle at 50% 26%,rgba(255,150,50,.24),transparent 42%),radial-gradient(circle at 50% 110%,rgba(160,60,20,.3),transparent 60%)}

#modal .modal-card{display:flex!important;flex-direction:column;align-items:stretch;width:min(640px,100%);height:auto!important;
  max-height:calc(100dvh - max(24px,var(--safe-top,0px)) - max(24px,var(--safe-bottom,0px)));padding:20px 26px 18px;overflow:hidden auto;
  border-color:color-mix(in srgb,var(--res-a) 70%,#3a2a14);box-shadow:0 30px 95px rgba(0,0,0,.92),0 0 60px var(--res-glow),inset 0 1px rgba(255,225,151,.08)}
#modal.is-victory .modal-card{background:radial-gradient(90% 55% at 50% 0%,rgba(255,140,40,.18),transparent 65%),linear-gradient(180deg,rgba(30,17,10,.98),rgba(9,7,7,.99))}
#modal.is-draw .modal-card{background:radial-gradient(90% 55% at 50% 0%,rgba(170,190,210,.1),transparent 65%),linear-gradient(180deg,rgba(18,20,24,.98),rgba(8,9,11,.99))}
#modal.is-defeat .modal-card{background:radial-gradient(90% 55% at 50% 0%,rgba(140,60,40,.12),transparent 65%),linear-gradient(180deg,rgba(17,13,14,.98),rgba(7,8,11,.99))}

/* ---------- ambient FX layer (victory) ---------- */
.res-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:0}
#modal.is-victory .res-fx{opacity:1}
.res-rays{position:absolute;left:50%;top:92px;width:520px;height:520px;margin:-260px 0 0 -260px;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,205,110,.13) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.6) 38%,transparent 62%);mask:radial-gradient(circle,#000 0 18%,rgba(0,0,0,.6) 38%,transparent 62%)}
#modal.is-victory.res-play .res-rays{animation:resRaysIn 1s .25s cubic-bezier(.2,.8,.2,1) forwards,resSpin 40s linear infinite}
.res-fx i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff1c4,#ff9a3c 45%,rgba(255,80,20,0) 72%)}
.res-fx i:nth-of-type(1){left:8%;animation-delay:.2s!important}.res-fx i:nth-of-type(2){left:18%;animation-delay:1.6s!important;transform:scale(.7)}
.res-fx i:nth-of-type(3){left:29%;animation-delay:.9s!important}.res-fx i:nth-of-type(4){left:40%;animation-delay:2.4s!important}
.res-fx i:nth-of-type(5){left:52%;animation-delay:.5s!important}.res-fx i:nth-of-type(6){left:61%;animation-delay:1.9s!important}
.res-fx i:nth-of-type(7){left:70%;animation-delay:1.1s!important}.res-fx i:nth-of-type(8){left:79%;animation-delay:2.8s!important}
.res-fx i:nth-of-type(9){left:88%;animation-delay:.3s!important}.res-fx i:nth-of-type(10){left:95%;animation-delay:1.4s!important}
#modal.is-victory.res-play .res-fx i{animation:resEmber 4.2s linear infinite}
#modal .modal-card>*:not(.res-fx){position:relative;z-index:1}

/* ---------- hero ---------- */
#modal .aftermath-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 0 12px;border:0;text-align:center}
.res-crest-stage{position:relative;width:96px;height:96px;display:grid;place-items:center}
#modal .aftermath-crest{position:relative;z-index:2;flex:none;width:96px;height:96px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.8))}
#modal.is-defeat .aftermath-crest{opacity:.82}
#modal.is-draw .aftermath-crest{opacity:.9;filter:grayscale(.55) drop-shadow(0 4px 14px rgba(0,0,0,.8))}
.v3res-crestfx{position:absolute;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s ease}
#modal.is-victory.open .v3res-crestfx{opacity:1}
.res-crown{position:absolute;z-index:3;top:-22px;left:50%;margin-left:-.5em;font-size:34px;line-height:1;color:#ffd77a;opacity:0;
  text-shadow:0 0 14px rgba(255,170,60,.7),0 2px 0 #6b4512;display:none}
#modal.is-victory .res-crown{display:block}
#modal.is-victory.res-play .res-crown{animation:resCrown .8s .55s cubic-bezier(.2,1.4,.4,1) forwards}
#modal .aftermath-kicker{margin:6px 0 0!important;color:var(--res-a)!important;opacity:.85;font:700 .62rem "Cinzel",Georgia,serif!important;letter-spacing:.32em}
#modal .modal-card h2#modal-title{margin:0;font:900 clamp(2.6rem,7.5vw,4.6rem)/1 "Cinzel",Georgia,serif;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--res-b) 0%,var(--res-a) 45%,var(--res-c) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 18px var(--res-glow));text-shadow:none}
.res-badge{display:inline-block;margin:4px auto 0!important;padding:4px 14px;border:1px solid var(--res-a);color:var(--res-b)!important;
  background:linear-gradient(180deg,rgba(255,200,100,.16),rgba(80,40,10,.3));font:800 .66rem "Cinzel",Georgia,serif!important;letter-spacing:.24em;text-transform:uppercase;
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
#modal.is-defeat .res-badge{background:rgba(60,20,16,.4)}
#modal #modal-body{margin:6px 0 0;color:var(--res-ink);font:600 1.02rem/1.35 "Cinzel",Georgia,serif;letter-spacing:.03em}

/* ---------- score ---------- */
.res-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:2px 0 10px}
.res-score[hidden]{display:none}
.res-side{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 12px;
  border:1px solid rgba(233,197,116,.2);background:rgba(0,0,0,.28);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.res-side.is-enemy{grid-template-columns:1fr auto;text-align:right}
.res-castle{grid-row:1/3;width:46px;height:46px;border:1px solid rgba(233,197,116,.45);background:center/cover no-repeat}
.res-side.is-you .res-castle{background-image:url('../../assets/art/cards-v4/castle-fire.jpg')}
.res-side.is-enemy .res-castle{grid-column:2;background-image:url('../../assets/art/cards-v4/castle-water.jpg')}
.res-side strong{font:900 2.3rem/1 "Cinzel",Georgia,serif;color:var(--res-b)}
.res-side small{font:700 .62rem "Cinzel",Georgia,serif;letter-spacing:.22em;text-transform:uppercase;color:var(--v3m-mute,#cbb894)}
.res-side.is-enemy strong,.res-side.is-enemy small{grid-column:1}
#modal.is-victory .res-side.is-you{border-color:var(--res-a);box-shadow:inset 0 0 22px rgba(255,170,60,.18)}
#modal.is-defeat .res-side.is-enemy{border-color:rgba(199,121,94,.6)}
.res-vs{font:800 .7rem "Cinzel",Georgia,serif;letter-spacing:.2em;color:var(--res-a);opacity:.8}

/* ---------- recap ---------- */
#modal .modal-overkill{margin:0 0 6px;text-align:center;font-family:"Cinzel",Georgia,serif;color:var(--res-b)}
#modal .recap-sheet{display:grid;grid-template-columns:1fr;gap:6px;margin:0}
#modal .recap-row{grid-template-columns:132px minmax(0,1fr);min-height:0;padding:8px 12px;gap:12px}
#modal .recap-row dt{color:var(--res-a);font:700 .6rem "Cinzel",Georgia,serif;letter-spacing:.14em}
#modal .recap-row dd{font-size:.86rem;color:var(--res-ink)}
#modal .recap-row-rating{grid-template-columns:1fr!important;border-color:color-mix(in srgb,var(--res-a) 45%,transparent)}
.recap-rank-result{display:grid!important;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;text-align:left!important}
.res-rank-arrow{grid-row:1/3;font-size:1.6rem;line-height:1;color:var(--res-b)}
.recap-rank-result.is-up .res-rank-arrow{color:#ffd77a}.recap-rank-result.is-down .res-rank-arrow{color:#d27f66}
.recap-rank-result .recap-rank-message{font:700 .95rem "Cinzel",Georgia,serif;color:var(--res-ink)}
.recap-rank-result .recap-rank-value{grid-row:1/3;grid-column:3;font:900 1.9rem/1 "Cinzel",Georgia,serif;color:var(--res-b);font-variant-numeric:tabular-nums}
.res-rank-name{font:700 .6rem "Cinzel",Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:var(--res-a)}
#modal #recap-damage{display:block!important;width:100%}
#modal .modal-card h2#modal-title::before,#modal .modal-card h2#modal-title::after{display:none!important;content:none!important}
.res-dmg-nums{display:flex;justify-content:space-between;gap:10px}
.res-dmg-nums .recap-damage-stat{display:flex;align-items:baseline;gap:6px}
.res-dmg-nums small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--v3m-mute,#cbb894)}
.res-dmg-nums strong{font:900 1.15rem "Cinzel",Georgia,serif;color:var(--res-b)}
.res-dmg-nums .is-sustained strong{color:#9fb7c9}
.res-dmg-bar{position:relative;display:block;height:9px;margin-top:5px;overflow:hidden;background:linear-gradient(90deg,#36506a,#22384c);border:1px solid rgba(233,197,116,.25)}
.res-dmg-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--share,.5));background:linear-gradient(90deg,#8a3a14,#f0a040 70%,#ffe2a0)}
#modal.res-play .res-dmg-fill{animation:resBar 1s 1.1s cubic-bezier(.2,.8,.2,1) both}

/* ---------- actions ---------- */
#modal .modal-actions{display:flex;justify-content:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(233,197,116,.16)}
#modal .modal-actions #modal-btn-rematch{flex:1 1 60%;min-width:0;max-width:300px;min-height:50px;font:800 .9rem "Cinzel",Georgia,serif;letter-spacing:.16em;color:#2a1606;
  border:1px solid #fbe3a0;background:linear-gradient(180deg,#fff0bf 0%,#e9c574 38%,#b08436 70%,#7a5a22 100%);text-shadow:0 1px 0 rgba(255,240,200,.6);
  box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 22px rgba(255,170,60,.28)}
#modal .modal-actions #modal-btn-quit{flex:0 1 34%;min-width:0;max-width:190px;min-height:50px;font:700 .72rem "Cinzel",Georgia,serif;letter-spacing:.14em;color:#e2cfa2;
  background:linear-gradient(180deg,rgba(60,44,26,.7),rgba(16,12,10,.95));border:1px solid rgba(233,197,116,.4);box-shadow:none}
#modal .modal-actions button:hover{transform:translateY(-1px)}

/* ---------- staggered reveal ---------- */
#modal.res-play .res-crest-stage{animation:resPop .7s .05s cubic-bezier(.2,1.2,.4,1) both}
#modal.res-play .aftermath-kicker{animation:resUp .5s .25s ease both}
#modal.res-play #modal-title{animation:resTitle .75s .32s cubic-bezier(.2,1.1,.3,1) both}
#modal.res-play .res-badge{animation:resPop .6s .8s cubic-bezier(.2,1.4,.4,1) both}
#modal.res-play #modal-body{animation:resUp .5s .6s ease both}
#modal.res-play .res-side.is-you{animation:resLeft .55s .8s ease both}
#modal.res-play .res-side.is-enemy{animation:resRight .55s .8s ease both}
#modal.res-play .res-vs{animation:resUp .5s .9s ease both}
#modal.res-play .modal-overkill{animation:resUp .5s .95s ease both}
#modal.res-play .recap-row-rating{animation:resUp .5s 1s ease both}
#modal.res-play .recap-row-attack{animation:resUp .5s 1.1s ease both}
#modal.res-play .recap-row-damage{animation:resUp .5s 1.2s ease both}
#modal.res-play .modal-actions{animation:resUp .5s 1.35s ease both}
@keyframes resUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes resLeft{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes resRight{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes resPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes resTitle{from{opacity:0;transform:translateY(14px) scale(1.18)}to{opacity:1;transform:none}}
@keyframes resCrown{from{opacity:0;transform:translateY(14px) scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes resRaysIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes resSpin{to{rotate:360deg}}
@keyframes resEmber{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}80%{opacity:.6}100%{opacity:0;transform:translate(14px,-460px)}}
@keyframes resBar{from{transform:scaleX(0)}to{transform:scaleX(var(--share,.5))}}

/* ---------- shorter desktops (e.g. 1280x720) ---------- */
@media (min-height:521px) and (max-height:820px) and (orientation:landscape){
  #modal .modal-card{padding:14px 22px 12px}
  .res-crest-stage,#modal .aftermath-crest{width:70px;height:70px}
  .res-crown{font-size:28px;top:-16px}
  #modal .modal-card h2#modal-title{font-size:3.2rem}
  #modal #modal-body{font-size:.92rem}
  .res-score{margin-bottom:8px}.res-side{padding:5px 10px}.res-castle{width:38px;height:38px}.res-side strong{font-size:1.9rem}
  #modal .recap-row{padding:6px 12px}
  #modal .modal-actions{margin-top:8px;padding-top:9px}
  #modal .modal-actions #modal-btn-rematch,#modal .modal-actions #modal-btn-quit{min-height:44px}
  .res-rays{top:70px}
}
/* ---------- phone portrait ---------- */
@media (max-width:620px) and (orientation:portrait){
  #modal .modal-card{width:100%;padding:16px 14px 14px}
  .res-crest-stage,#modal .aftermath-crest{width:76px;height:76px}
  .res-crown{font-size:28px;top:-18px}
  #modal .modal-card h2#modal-title{font-size:clamp(2.3rem,12vw,3.2rem)}
  #modal #modal-body{font-size:.9rem}
  .res-side{padding:6px 8px;column-gap:7px}.res-castle{width:36px;height:36px}.res-side strong{font-size:1.8rem}
  #modal .recap-row{grid-template-columns:1fr;gap:4px;padding:7px 10px}
  #modal .recap-row dd{font-size:.8rem}
  .recap-rank-result .recap-rank-value{font-size:1.6rem}
  #modal .modal-actions button{min-height:46px!important}
}
/* ---------- short landscape (phones) ---------- */
@media (orientation:landscape) and (max-height:520px){
  #modal .modal-card{display:grid!important;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-areas:"head recap" "score recap" "overkill recap" "status actions";align-content:center;column-gap:16px;
    width:min(860px,100%);max-height:calc(100dvh - 8px);padding:10px 16px;overflow:hidden}
  #modal .aftermath-head{grid-area:head;padding:0 0 4px;gap:1px}
  .res-crest-stage,#modal .aftermath-crest{width:52px;height:52px}.res-crown{font-size:22px;top:-12px}
  #modal .aftermath-kicker{font-size:.5rem!important;margin-top:2px!important}
  #modal .modal-card h2#modal-title{font-size:2rem}
  #modal #modal-body{font-size:.74rem;margin-top:2px}
  .res-badge{font-size:.52rem!important;padding:2px 10px}
  .res-score{grid-area:score;margin:2px 0}
  .res-side{padding:4px 8px}.res-castle{width:30px;height:30px}.res-side strong{font-size:1.4rem}.res-side small{font-size:.5rem}
  #modal .modal-overkill{grid-area:overkill;font-size:.6rem}
  #modal .recap-sheet{grid-area:recap;align-self:center;gap:4px}
  #modal .recap-row{grid-template-columns:1fr;gap:2px;padding:5px 9px}
  #modal .recap-row dt{font-size:.5rem}#modal .recap-row dd{font-size:.68rem}
  .recap-rank-result .recap-rank-message{font-size:.74rem}.recap-rank-result .recap-rank-value{font-size:1.3rem}
  #modal .modal-status{grid-area:status}
  #modal .modal-actions{grid-area:actions;margin-top:6px;padding-top:6px}
  #modal .modal-actions #modal-btn-rematch,#modal .modal-actions #modal-btn-quit{min-height:36px;font-size:.66rem}
  .res-rays{top:40px}
}
@media (prefers-reduced-motion:reduce){
  #modal.res-play *,#modal.res-play .res-fx i,#modal.res-play .res-rays{animation:none!important}
  #modal.is-victory .res-crown,#modal.is-victory .res-rays{opacity:1}
  .res-fx i{display:none}
}
.res-badge[hidden]{display:none!important}
/* ---------- large desktop ---------- */
@media (min-width:1500px) and (min-height:900px){
  #modal .modal-card{width:min(760px,100%);padding:26px 34px 22px}
  .res-crest-stage,#modal .aftermath-crest{width:124px;height:124px}
  .res-crown{font-size:42px;top:-28px}
  #modal .aftermath-kicker{font-size:.78rem!important}
  #modal .modal-card h2#modal-title{font-size:5.6rem}
  #modal #modal-body{font-size:1.3rem}
  .res-castle{width:60px;height:60px}.res-side strong{font-size:3rem}.res-side small{font-size:.75rem}
  #modal .recap-row{grid-template-columns:170px minmax(0,1fr);padding:11px 16px}
  #modal .recap-row dt{font-size:.74rem}#modal .recap-row dd{font-size:1.05rem}
  .recap-rank-result .recap-rank-message{font-size:1.2rem}.recap-rank-result .recap-rank-value{font-size:2.4rem}
  .res-dmg-nums strong{font-size:1.4rem}.res-dmg-nums small{font-size:.8rem}.res-dmg-bar{height:12px}
  #modal .modal-actions #modal-btn-rematch{min-height:60px;font-size:1.05rem;max-width:360px}
  #modal .modal-actions #modal-btn-quit{min-height:60px;font-size:.85rem;max-width:220px}
  .res-rays{top:120px;width:720px;height:720px;margin:-360px 0 0 -360px}
}