/* Finish-screen campaign. Game HUD and room styles remain independent. */
.result{
 width:min(100%,1240px);padding:0 clamp(20px,4.2vw,54px) calc(36px + var(--safe-b));
 --ivy:#005b46;--brand-lime:#bfd739;--ivory:#fffcf2;
 --campaign-font:var(--brand-font);
}
body:has(#result:not([hidden])){background:radial-gradient(ellipse at 34% 0%,#e7efda 0,transparent 64%),var(--paper)}
.result .mast{height:calc(68px + var(--safe-t));border:0;justify-content:center;padding-inline:2px}
.result .mast .brand{width:135px}
.campaign{
 position:relative;isolation:isolate;overflow:hidden;display:grid;
 grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
 grid-template-areas:"copy art";align-items:center;
 min-height:clamp(376px,54vw,562px);padding:clamp(24px,4vw,56px);
 border-radius:clamp(22px,3vw,37px);text-align:center;
 background:radial-gradient(ellipse at 20% 80%,#277058,transparent 61%),linear-gradient(134deg,#08484a 22%,#054b46 100%);
 color:var(--ivory);box-shadow:0 17px 48px #15433925;container-type:inline-size;
}
.campaign-shapes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.campaign-shapes span{position:absolute;display:block}
.campaign-shapes span:nth-child(1){inline-size:38%;aspect-ratio:1;inset-inline-start:-25%;top:-25%;border:clamp(18px,3vw,46px) solid #42e68727;border-radius:50%}
.campaign-shapes span:nth-child(2){inline-size:11%;aspect-ratio:1;right:0;bottom:0;background:#01af743c;border-radius:100% 0 0 0}
.campaign-shapes span:nth-child(3){width:88px;height:58px;right:22px;bottom:20px;background:radial-gradient(circle,#c7de82 2px,transparent 3px) 0 0 / 15px 15px;opacity:.37}
.campaign-shapes span:nth-child(4){inset:12px;border:1px solid #ebf4c926;border-radius:inherit}
.campaign-copy{position:relative;z-index:2;grid-area:copy;container-type:inline-size}
.campaign-copy h2{
 font-family:var(--campaign-font);font-size:clamp(29px,5.65vw,76px);font-size:clamp(26px,15.15cqi,76px);
 font-weight:700;letter-spacing:0;word-spacing:.055em;line-height:1.155;margin:0;
 outline:none;
}
.campaign-line{display:block;white-space:nowrap}
.campaign-copy h2 em{color:var(--brand-lime);font-style:normal}
.campaign-copy p{font-family:var(--campaign-font);font-size:clamp(17px,5.5cqi,29px);line-height:1.3;font-weight:650;margin:clamp(11px,3.5cqi,20px) 0 0}
.campaign-copy p strong{display:block;width:max-content;max-width:100%;margin:5px auto 0;font-size:clamp(23px,8.8cqi,43px);font-weight:800;letter-spacing:.035em;white-space:nowrap;color:var(--brand-lime)}
.campaign-visual{grid-area:art;position:relative;display:grid;place-items:center;min-width:0;z-index:1}
.campaign-disc{
 position:absolute;z-index:-1;width:77%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(circle at 30% 30%,#e8f29e,#bfd739 68%,#82ad40 100%);
 box-shadow:0 0 60px #91cb533a;border:1px solid #e9ffc078;opacity:.93;
}
.campaign-artwork{position:relative;width:112%;aspect-ratio:1200/774;filter:drop-shadow(0 14px 11px #0019147d);transform-origin:50% 80%}
.campaign-art{width:100%;height:auto;object-fit:contain}
.campaign-crate-mark{position:absolute;width:11%;left:72.5%;top:74.3%;transform:rotate(7deg) skewY(1deg);filter:brightness(0) invert(1);opacity:.92}
.campaign-spark{position:absolute;width:7.5%;height:auto;aspect-ratio:1;color:#ebf5ae;z-index:3;pointer-events:none}
.spark-one{left:2%;top:20%}.spark-two{right:6%;top:10%;width:4.5%;color:#42e687}
.campaign-actions{display:grid;justify-items:center;width:min(100%,390px);gap:11px;margin:17px auto 0}
.campaign-record{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--deep);font-size:16px;font-weight:700}
.campaign-record svg{width:18px;height:18px;margin-inline-end:3px;color:var(--ivy)}
.campaign-record strong{font-size:21px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.campaign-replay{width:100%;min-height:58px;background:var(--ivy);border-radius:16px;font-family:var(--campaign-font);font-size:21px;font-weight:900}

#app[data-phase="result"] .campaign{animation:campaign-in .36s cubic-bezier(.15,.75,.3,1) both}
#app[data-phase="result"] .campaign-copy{animation:copy-in .5s cubic-bezier(.12,.78,.31,1) .08s both}
#app[data-phase="result"] .campaign-artwork{animation:art-in .62s cubic-bezier(.17,.74,.23,1.09) .16s both}
#app[data-phase="result"] .campaign-disc{animation:disc-in .7s cubic-bezier(.22,.72,.26,1) .10s both}
#app[data-phase="result"] .campaign-spark{animation:twinkle 3.5s ease-in-out .4s infinite both}
#app[data-phase="result"] .spark-two{animation-delay:.7s}
@keyframes campaign-in{from{opacity:.55;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes art-in{from{opacity:0;transform:translateY(21px) scale(.934)}to{opacity:1;transform:none}}
@keyframes disc-in{from{opacity:.3;transform:scale(.72)}to{opacity:.93;transform:none}}
@keyframes twinkle{0%,100%{opacity:.32;transform:scale(.76)}48%{opacity:1;transform:scale(1.12)}}
@media(min-width:741px) and (max-height:670px){
 .result .mast{height:calc(55px + var(--safe-t))}
 .campaign{min-height:0;padding-block:clamp(20px,4vh,32px)}
 .campaign-artwork{width:min(110%,64vh)}
 .campaign-actions{margin-block:14px 19px}
}
@media(max-width:740px){
 .result{width:min(100%,520px);padding-inline:clamp(13px,4.1vw,22px)}
 .result .mast{height:calc(54px + var(--safe-t))}
 .result .mast .brand{width:115px}
 .campaign{
  min-height:0;grid-template-columns:1fr;grid-template-areas:"copy" "art";gap:9px;
  padding:clamp(21px,6.1vw,34px) clamp(10px,3.4vw,18px) 13px;
 }
 .campaign-visual{width:min(100%,385px);margin:auto;aspect-ratio:1200/774}
 .campaign-artwork{width:100%}
 .campaign-disc{width:62%;background:radial-gradient(circle at 30% 30%,#e7f195,#bfd739 78%);opacity:.93}
 .campaign-shapes span:nth-child(1){inline-size:58%;inset-inline-start:-39%;top:-15%}
 .campaign-shapes span:nth-child(3){right:13px;bottom:12px;opacity:.24;width:52px;height:53px;background-size:12px 12px}
 .campaign-shapes span:nth-child(4){inset:7px}
 .spark-one{left:6%;top:16%}.spark-two{right:9%;top:9%}
 .campaign-actions{margin:12px auto 0;gap:9px}
 .campaign-replay{min-height:54px}
}
@media(prefers-reduced-motion:reduce){
 #app[data-phase="result"] .campaign,#app[data-phase="result"] .campaign-copy,#app[data-phase="result"] .campaign-artwork,#app[data-phase="result"] .campaign-disc,#app[data-phase="result"] .campaign-spark{animation:none!important}
}
