/* M1 0.13 / classic-ui-friend-r2. Result and friend-invitation overlays only.
   Gameplay HUD, tower cards, dock and placement controls use the0.11 sheets. */
#result {
  --result-ink:#183247;
  --result-paper:url('./assets/m1-ui/inset-grain.svg') 0 0/108px 76px repeat,radial-gradient(ellipse at 35% 25%,#fff5de,#edddba 78%,#d5bb8d);
  --result-stone:url('./assets/m1-ui/stone-grain.svg') 0 0/96px 96px repeat,linear-gradient(145deg,#405d76,#2c435a 70%,#22364a);
}
#result .overlay-card.result-card {
  position:relative; isolation:isolate; width:480px; max-width:100%;
  max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain;
  padding:22px; border:1px solid #9d835a; border-radius:12px;
  color:#eef4f8; background:var(--result-stone)!important; text-align:center;
  box-shadow:inset 0 0 0 1px #b5c7d77a,inset 0 0 0 4px #1b30464d,0 12px 45px #1022358c!important;
}
#result .result-brand { display:block; width:168px; max-width:60%; height:auto; margin:0 auto 12px; border-radius:5px; }
#result #result-label { margin:0 0 5px; color:#e4c68b!important; font:800 11px/15px system-ui; letter-spacing:1.8px; }
#result #outcome { margin:0 0 12px; color:#f7eddb!important; font:700 clamp(28px,6vw,38px)/1.12 Georgia,'Times New Roman',serif; text-shadow:0 2px 0 #182c42; }
#result .score-card { display:grid; gap:6px; margin:14px 0; padding:17px 12px; border:1px solid #bc9d65; border-radius:8px; background:var(--result-paper)!important; color:var(--result-ink); box-shadow:inset 0 0 0 1px #fff6de,inset 0 0 0 3px #b69b6638; }
#result .score-card>span { color:#435466; font:800 11px/15px system-ui; letter-spacing:1.4px; text-transform:uppercase; }
#result #result-score { color:#1b3853; font:750 clamp(44px,11vw,64px)/1 Georgia,'Times New Roman',serif; font-variant-numeric:tabular-nums; }
#result #score-breakdown { color:#3a4d5a; font-size:11px; line-height:16px; }
#result #result-detail { margin:10px 0; color:#e2ecf4!important; font-size:13px; line-height:20px; }
#result #result-celebration { margin:12px 0; color:#ffe1a0!important; font:700 17px/23px Georgia,'Times New Roman',serif; }
#result #score-rule { margin:10px 0 14px; color:#c6d5e1!important; font:11px/16px system-ui; }
#result #score-challenge { margin:12px 0; padding:9px; border:1px solid #7999b2; border-radius:6px; color:#f6e1b0!important; background:#172e4659; font:700 13px/19px system-ui; }
#result #share-result {
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:82px; height:auto; margin:6px 0; padding:12px;
  color:#45290e!important; border:1px solid #f5d485!important; border-radius:8px;
  background:linear-gradient(145deg,#ffe9ad,#f2c05f 60%,#e8a84a)!important;
  box-shadow:inset 0 0 0 1px #fff1c8,inset 0 -3px 0 #b9752b,0 3px 12px #151f2f60!important;
  text-shadow:0 1px #fff2c9; opacity:1;
}
#result #share-result:enabled:hover { background:linear-gradient(145deg,#fff0c4,#ffd17b 65%,#efb553)!important; border-color:#fff1c8!important; }
#result #share-result:enabled:active { transform:translateY(1px); box-shadow:inset 0 2px 4px #9c601d55,inset 0 0 0 1px #fff1c8!important; }
#result #share-result:disabled { color:#4a4e48!important; border-color:#b9bbae!important; background:linear-gradient(145deg,#d5d6c7,#b8bcae)!important; box-shadow:inset 0 0 0 1px #e4e5da,inset 0 -2px 0 #8b9385!important; opacity:1; text-shadow:none; }
#result .share-symbol { flex:none; width:30px; height:30px; }
#result .share-copy { display:block; min-width:0; text-align:left; }
#result .share-copy strong { display:block; color:inherit; font:800 clamp(19px,5vw,23px)/27px Georgia,'Times New Roman',serif; }
#result .share-copy small { display:block; margin-top:2px; color:inherit; font:650 12px/17px system-ui; }
#result .share-arrow { flex:none; margin-left:auto; font:700 28px/32px system-ui; }
#result #share-status { display:block; margin:7px 0; color:#edf2f6; font:12px/18px system-ui; }
#result #share-copy { width:100%; min-height:100px; padding:8px; border:1px solid #98aab8; border-radius:5px; color:#173044; background:#fff6e2; box-sizing:border-box; font:13px/19px system-ui; }
#result #result-advice { margin:12px 0; color:#dce8f1!important; font-size:12px; line-height:18px; }
#result .overlay-actions { justify-content:center; gap:7px; }
#result .overlay-actions button { min-height:44px; color:#1b354a!important; border-color:#6e8ba2!important; background:linear-gradient(145deg,#c4d5e1,#96b0c5)!important; box-shadow:inset 0 0 0 1px #e4eff7a1,inset 0 -2px 0 #57738b80!important; text-shadow:0 1px #e3edf4; }
#result .overlay-actions button.primary { color:#fff7e4!important; border-color:#9ba979!important; background:linear-gradient(145deg,#426c4d,#294f3a)!important; text-shadow:0 1px #173723; }
#result :is(button,textarea):focus-visible { outline:3px solid #ffe09a; outline-offset:3px; }

/* Rays and arrival treatment apply only to an actual won outcome. */
#result[data-outcome="won"] .overlay-card.result-card { border-color:#e5c178; background:radial-gradient(ellipse at 50% 0,#a58d5c59,transparent 55%),var(--result-stone)!important; box-shadow:inset 0 0 0 1px #f4ddaa,inset 0 0 0 4px #263d51,0 0 40px #e2bb6840,0 12px 45px #1022358c!important; animation:result-victory-arrive .7s ease-out both; }
#result[data-outcome="won"] .overlay-card.result-card::before { content:''; position:absolute; z-index:-1; left:0; right:0; top:0; height:260px; border-radius:10px 10px 0 0; background:repeating-conic-gradient(from -15deg at 50% 20%,#f1cc7018 0deg 12deg,transparent 12deg 30deg); mask-image:linear-gradient(#000,transparent); pointer-events:none; }
#result[data-outcome="won"] #outcome { color:#ffe3a1!important; font-size:clamp(42px,10vw,56px); letter-spacing:.5px; text-shadow:0 2px 0 #8b572a,0 0 20px #f8cb5c35; }
#result[data-outcome="won"] .score-card { border-color:#e2b760; box-shadow:inset 0 0 0 1px #fff6de,inset 0 0 0 3px #b9924d40,0 0 18px #f2bf4f1a; }
@keyframes result-victory-arrive { from { transform:translateY(10px); } to { transform:translateY(0); } }
@media(max-height:440px) {
  #result .overlay-card.result-card { max-height:calc(100dvh - 16px); padding:16px; }
  #result .result-brand { width:150px; margin-bottom:8px; }
}
@media(prefers-reduced-motion:reduce) {
  #result[data-outcome="won"] .overlay-card.result-card { animation:none; }
  #result #share-result:enabled:active { transform:none; }
}

/* The friend invitation is a separate modal, never a HUD/toolbar restyle. */
#challenge-invite .overlay-card.challenge-invite-card {
  position:relative; width:420px; max-width:100%; max-height:calc(100dvh - 24px);
  overflow:auto; overscroll-behavior:contain; padding:24px; border:1px solid #bda36c;
  border-radius:12px; color:#edf4f9;
  background:url('./assets/m1-ui/stone-grain.svg') 0 0/96px 96px repeat,linear-gradient(145deg,#405d76,#253b52)!important;
  box-shadow:inset 0 0 0 1px #d8c99b99,inset 0 0 0 4px #1b30464d,0 12px 45px #1022358c!important;
}
#challenge-invite .invite-heading { padding-right:32px; }
#challenge-invite .invite-heading .eyebrow { margin:0 0 6px; color:#efcc83!important; font:750 10px/15px system-ui; letter-spacing:1px; }
#challenge-invite #challenge-invite-title { margin:0; color:#fff0d1!important; font:700 27px/32px Georgia,'Times New Roman',serif; }
#challenge-invite #close-challenge-invite { position:absolute; top:8px; right:8px; width:44px; min-width:44px; height:44px; padding:0; border-color:#8199ad!important; color:#edf3f8!important; background:#344f68!important; font-size:25px; box-shadow:inset 0 0 0 1px #a4bacb66!important; }
#challenge-invite #challenge-invite-description { margin:14px 0; color:#e2edf5!important; font:14px/21px system-ui; }
#challenge-invite .invite-target { margin:12px 0 16px; padding:15px 10px; border:1px solid #d0af6f; border-radius:7px; text-align:center; color:#173247; background:linear-gradient(145deg,#fff2cf,#e6cc95); }
#challenge-invite .invite-target>span { display:block; color:#4c4a3d; font:800 11px/16px system-ui; letter-spacing:1px; text-transform:uppercase; }
#challenge-invite #challenge-invite-score { display:block; margin:4px 0; color:#173247; font:750 23px/29px Georgia,'Times New Roman',serif; font-variant-numeric:tabular-nums; }
#challenge-invite #challenge-invite-map { margin:6px 0 0; color:#354b58!important; font:700 13px/18px system-ui; }
#challenge-invite #accept-challenge { width:100%; min-height:50px; gap:10px; border-color:#f4d588!important; border-radius:7px; color:#45290e!important; background:linear-gradient(145deg,#ffe9ad,#efb650)!important; box-shadow:inset 0 0 0 1px #fff1c8,inset 0 -3px 0 #b9752b!important; text-shadow:0 1px #fff2c9; font:800 18px/24px Georgia,'Times New Roman',serif; }
#challenge-invite #accept-challenge:enabled:hover { background:linear-gradient(145deg,#fff0c4,#f6c46b)!important; }
#challenge-invite .invite-note { display:block; margin-top:12px; color:#d9e6f0!important; font:11px/17px system-ui; text-align:center; }
#challenge-invite button:focus-visible { outline:3px solid #ffe09a; outline-offset:3px; }
#result #score-challenge>strong { display:block; margin-bottom:8px; color:#ffe1a0; font:750 16px/21px Georgia,'Times New Roman',serif; }
#result .challenge-score-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#result .challenge-score-pair span { color:#dbe7f0; font:11px/16px system-ui; }
#result .challenge-score-pair b { display:block; color:#fff2cf; font:800 24px/29px Georgia,'Times New Roman',serif; font-variant-numeric:tabular-nums; }
#result #challenge-result-note { display:block; margin-top:7px; color:#c7d8e5; font:10px/15px system-ui; }
#result #score-challenge[data-result="beaten"] { border-color:#9ec399; }
@media(max-height:440px) {
  #challenge-invite .overlay-card.challenge-invite-card { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:540px; max-height:calc(100dvh - 16px); padding:16px; }
  #challenge-invite .invite-heading { grid-column:1/-1; }
  #challenge-invite #challenge-invite-title { font-size:24px; line-height:28px; }
  #challenge-invite #challenge-invite-description { grid-column:1; grid-row:2; margin:0; font-size:13px; line-height:19px; }
  #challenge-invite .invite-target { grid-column:2; grid-row:2/span 2; margin:0; padding:8px; align-content:center; }
  #challenge-invite #challenge-invite-score { font-size:20px; line-height:25px; }
  #challenge-invite #accept-challenge { grid-column:1; grid-row:3; min-height:46px; }
  #challenge-invite .invite-note { grid-column:1/-1; margin:0; font-size:10px; line-height:15px; }
}

@media(max-width:375px) {
  #result .result-brand { width:150px; }
}

/* Give roomy desktop/tablet viewports a complete result board. Both axes
   gate this layout so accepted phone and short-landscape cards stay intact. */
@media(min-width:700px) and (min-height:650px) {
  #result .overlay-card.result-card {
    display:grid; width:min(1040px,calc(100vw - 64px)); padding:28px;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-areas:
      "brand score"
      "label score"
      "headline cta"
      "celebrate cta"
      "detail status"
      "rules status"
      "advice advice"
      "copy copy"
      "actions actions";
    gap:10px 28px; align-items:center;
  }
  #result .overlay-card.result-card:has(#score-challenge:not([hidden])) {
    grid-template-areas:
      "brand score"
      "label score"
      "headline challenge"
      "celebrate challenge"
      "detail cta"
      "rules cta"
      "advice status"
      "copy copy"
      "actions actions";
  }
  #result .result-brand { grid-area:brand; width:210px; max-width:80%; margin:0 auto; }
  #result #result-label { grid-area:label; margin:0; font-size:12px; line-height:17px; letter-spacing:2px; }
  #result #outcome { grid-area:headline; margin:0; font-size:clamp(32px,3.5vw,44px); line-height:1.08; }
  #result[data-outcome="won"] #outcome { font-size:clamp(48px,4.8vw,68px); }
  #result .score-card { grid-area:score; align-self:stretch; align-content:center; margin:0; padding:20px 16px; }
  #result .score-card>span { font-size:12px; line-height:17px; letter-spacing:2px; }
  #result #result-score { font-size:clamp(50px,6.25vw,80px); }
  #result #score-breakdown { font-size:12px; line-height:18px; }
  #result #result-celebration { grid-area:celebrate; margin:0; font-size:19px; line-height:26px; }
  #result #score-challenge { grid-area:challenge; align-self:stretch; align-content:center; margin:0; padding:12px; }
  #result #score-challenge>strong { font-size:19px; line-height:25px; }
  #result .challenge-score-pair b { font-size:29px; line-height:35px; }
  #result #challenge-result-note { font-size:11px; line-height:16px; }
  #result #share-result { grid-area:cta; align-self:stretch; min-height:90px; margin:0; padding:14px 16px; }
  #result .share-copy strong { font-size:23px; line-height:28px; }
  #result .share-copy small { font-size:13px; line-height:19px; }
  #result #result-detail { grid-area:detail; margin:0; }
  #result #score-rule { grid-area:rules; margin:0; }
  #result #share-status { grid-area:status; margin:0; }
  #result #share-copy { grid-area:copy; margin:0; }
  #result #result-advice { grid-area:advice; margin:0; }
  #result .overlay-actions { grid-area:actions; margin:0; padding-top:12px; border-top:1px solid #b6a47955; }
  #result .overlay-actions button { min-width:120px; min-height:46px; }
  #result[data-outcome="won"] .overlay-card.result-card::before { height:100%; background:repeating-conic-gradient(from -15deg at 23% 20%,#f1cc7018 0deg 12deg,transparent 12deg 30deg); }
}