/* Classic field rewards share one visual language with the after-action report. */
.classic-rewards {
  --reward-accent: #d8ef91;
  --reward-edge: #566744;
  --reward-fill: #253629;
  --reward-cut: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  position: relative;
  isolation: isolate;
  padding: clamp(12px, 2vw, 17px);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.classic-rewards::before, .classic-rewards::after {
  content: '';
  position: absolute;
  clip-path: var(--reward-cut);
  pointer-events: none;
}
.classic-rewards::before {
  z-index: -2;
  inset: 0;
  background: linear-gradient(113deg, var(--reward-accent), var(--reward-edge) 17%, #3f565e 65%, #8b805d);
}
.classic-rewards::after {
  z-index: -1;
  inset: 1px 1px 1px 3px;
  background: repeating-linear-gradient(135deg, #d6c0870c 0 1px, transparent 1px 9px), linear-gradient(115deg, var(--reward-fill), #142329 68%);
}
.classic-crates {
  --reward-accent: #ffdc91;
  --reward-edge: #856b49;
  --reward-fill: #382d22;
}
.reward-heading { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.reward-heading::after {
  content: '';
  position: absolute;
  inset: auto 0 -6px;
  height: 1px;
  background: linear-gradient(90deg, var(--reward-accent), transparent 80%);
  pointer-events: none;
}
.reward-heading .micro { color: var(--reward-accent); margin: 0 0 4px; }
.reward-heading h3 { margin: 0; font-size: clamp(18px, 3.7vw, 23px); line-height: 1.12; letter-spacing: -.03em; }
.reward-counter { margin: 0; border: 1px solid var(--reward-edge); border-radius: 0 7px 0 7px; padding: 5px 8px; color: var(--reward-accent); background: #111c21aa; font: 700 11px/1.2 var(--mono); }
.classic-crate-body { gap: 12px; }
.classic-crate-item { align-items: flex-start; min-width: 0; gap: 11px; }
.classic-crate-item > div { min-width: 0; }
.classic-crate-item .micro { display: block; font-size: 9px; color: var(--reward-accent); margin-bottom: 3px; }
.classic-crate-item strong { display: block; margin-bottom: 4px; overflow-wrap: anywhere; }
#classic-crate-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 0; background: linear-gradient(145deg, #574431, #211b1b); clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%); }
#classic-crate-icon svg { width: 28px; height: 28px; }
.crate-changes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; font: 650 11px/1.35 var(--mono); }
.crate-changes > span { border: 1px solid #9d815367; border-radius: 3px; padding: 3px 5px; background: #291d12a0; }
#classic-rewards .classic-reward-actions { justify-content: space-between; margin-top: 10px; }
.classic-reward-actions .muted { margin: 0; font-size: 12px; }
.classic-reward-actions .btn { min-height: 44px; }
#classic-upgrade-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.reward-card {
  --pick-accent: #f3db9c;
  --pick-shape: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  --pick-edge: #627461;
  --pick-fill: linear-gradient(145deg, #253933, #152128 72%);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 89px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  text-align: left;
  overflow-wrap: anywhere;
}
.reward-card::before, .reward-card::after { content: ''; position: absolute; pointer-events: none; clip-path: var(--pick-shape); }
.reward-card::before { z-index: -2; inset: 0; background: linear-gradient(130deg, var(--pick-accent), var(--pick-edge) 55%); }
.reward-card::after { z-index: -1; inset: 1px; background: var(--pick-fill); }
.reward-card[data-kind="Defense"] { --pick-accent: #b4e6bc; }
.reward-card[data-kind="Fieldwork"] { --pick-accent: #b2e2ed; }
.reward-card[data-kind="Cash"] { --pick-accent: #ffdd87; }
.reward-card:not(:disabled):hover, .reward-card:focus-visible, .reward-card[data-pad-focus] { --pick-edge: var(--pick-accent); --pick-fill: linear-gradient(145deg, #364c3d, #1b2a31 80%); }
.reward-card-kicker { display: flex; align-items: center; gap: 5px; color: var(--pick-accent); font: 720 9px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.reward-card-kicker svg { flex: 0 0 14px; width: 14px; height: 14px; }
.reward-card strong { font-size: 14px; line-height: 1.2; }
.reward-card-gain { align-self: end; font-size: 12px; color: var(--pick-accent); }

#results { --result-color: #ffab94; --result-wash: #402b29; --report-gap: 22px; }
#results[data-outcome="cleared"] { --result-color: #dfff86; --result-wash: #2f402c; }
#results[data-outcome="retired"] { --result-color: #e9cb92; --result-wash: #393226; }
#results .results-panel {
  --report-padding: clamp(12px, 3.2vw, 27px);
  --report-shell: polygon(13px 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 12px 100%, 0 calc(100% - 12px), 0 13px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  max-width: 650px;
  height: min(100%, 820px);
  max-height: calc(100vh - 2 * var(--report-gap));
  max-height: calc(100dvh - 2 * var(--report-gap));
  overflow: hidden;
  padding: 1px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.results-panel::before, .results-panel::after {
  content: '';
  position: absolute;
  clip-path: var(--report-shell);
  pointer-events: none;
}
.results-panel::before {
  z-index: -2;
  inset: 0;
  background: linear-gradient(140deg, var(--result-color), #52636a 26%, #3b515d 76%, #8f7b58);
}
.results-panel::after {
  z-index: -1;
  inset: 1px;
  background: linear-gradient(142deg, var(--result-wash), #162530 37%, #101a24);
}
.results-body { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding: var(--report-padding) var(--report-padding) 0; }
.results-body:focus-visible { outline: 2px solid var(--result-color); outline-offset: -3px; }
.results-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(10px, 2vw, 18px); }
.results-head::after {
  content: '';
  position: absolute;
  inset: auto 0 -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--result-color) 0 22%, #7c897b 22% 24%, #52636a 24% 63%, transparent 63%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  pointer-events: none;
}
.results-head .results-report-label { color: var(--result-color); margin: 0 0 4px; }
.results-head .eyebrow { color: #cad3d1; font-size: 9px; letter-spacing: .09em; margin: 0 0 7px; overflow-wrap: anywhere; }
#results-title { font-size: clamp(30px, 7vw, 48px); line-height: 1.04; }
#results-copy { margin: 7px 0 0; font-size: 13px; line-height: 1.4; }
.results-seal {
  position: relative;
  isolation: isolate;
  width: clamp(42px, 9vw, 63px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--result-color);
  background: color-mix(in srgb, var(--result-color) 57%, #344650);
  clip-path: polygon(20% 0, 86% 0, 100% 14%, 100% 77%, 77% 100%, 14% 100%, 0 86%, 0 20%);
}
.results-seal::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px;
  clip-path: inherit;
  background: repeating-linear-gradient(135deg, #1c303c 0 5px, #142430 5px 10px);
}
.results-seal svg { width: 68%; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.results-seal svg path:not(.results-shield) { display: none; }
[data-outcome="cleared"] .results-seal .seal-cleared,
[data-outcome="lost"] .results-seal .seal-lost,
[data-outcome="retired"] .results-seal .seal-retired { display: inline; }
.results-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-radius: 0 7px 0 7px; margin: 14px 0; }
.results-stats div { min-width: 0; padding: 8px 10px; background: linear-gradient(150deg, #1d303c, #131e29 70%); }
.results-stats strong { font-size: clamp(16px, 4vw, 21px); overflow-wrap: anywhere; }
.results-combat { padding: 11px; border-left: 3px solid #546e77; border-radius: 0 9px 0 9px; }
.results-mastery {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  padding: 10px;
  border: 1px solid #a6865f;
  border-left-width: 3px;
  border-radius: 0 9px 0 9px;
  background: linear-gradient(105deg, #3d3229, #222c33);
}
.results-mastery-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid #bc9a69; border-radius: 4px; color: #ffe0a3; }
.results-mastery-icon svg { width: 20px; height: 20px; }
.results-mastery .micro { color: #f3d3a0; font-size: 9px; }
.results-mastery h3 { margin: 2px 0; font-size: 16px; }
.results-mastery p { margin: 0; font-size: 12px; color: #e7d9c4; }
#results-signature-label { margin: 8px 0 4px; color: #bedbd7; font-size: 9px; }
.results-signature-list { display: grid; gap: 3px; padding: 0; margin: 0; list-style: none; }
.results-signature-list li { display: flex; justify-content: space-between; gap: 8px; padding-block: 3px; border-bottom: 1px solid #354852; color: #e9e5d8; font-size: 12px; }
.results-signature-list strong { color: #d5ebba; font: 750 12px/1.3 var(--mono); }
#results-recap-scope { margin: 6px 0 0; font-size: 10px; }
.results-weapons { gap: 5px; }
.results-weapons li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; }
.result-weapon-rank { border: 1px solid #51636d; border-radius: 4px; padding: 3px 4px; color: #c4d6d8; font: 750 10px/1.1 var(--mono); }
.result-weapon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: baseline; overflow-wrap: anywhere; }
.result-weapon-row strong { white-space: normal; text-align: right; }
.result-weapon-bar { display: block; grid-column: 1 / -1; height: 3px; overflow: hidden; background: #354550; border-radius: 2px; }
.result-weapon-bar::before { content: ''; display: block; width: var(--damage, 0%); height: 100%; background: var(--weapon-color, #a5dce5); }
.results-procs { padding-top: 4px; }
.results-procs > div { min-width: 0; overflow-wrap: anywhere; }
.run-token-line { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 9px; padding: 9px 11px; background: linear-gradient(115deg, #4f3b2a, #23272b); border: 1px solid #8b724f; border-inline-start: 3px solid #d4ad72; border-radius: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.run-token-line .micro { margin: 0 0 2px; font-size: 9px; color: #e7c692; }
.run-token-line .results-token-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #a4814f; border-radius: 50%; background: #261f1c; }
.results-token-icon .token-mark { width: 19px; height: 19px; }
#run-token-detail { text-align: right; }
.results-actions { position: relative; isolation: isolate; z-index: 2; min-width: 0; margin: 0; padding: 10px var(--report-padding); gap: 7px; border-top: 1px solid #536771; }
.results-actions::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(109deg, #182631 0 65%, #344149 65% 66%, #1e2d39 66%); clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.results-actions .btn { min-height: 44px; border-radius: 3px 10px 3px 10px; }

@media (max-width: 650px) {
  #classic-upgrade-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #results { --report-gap: 10px; }
}
@media (max-width: 420px) {
  .reward-heading { gap: 6px; }
  .reward-counter { padding-inline: 5px; font-size: 10px; }
  .classic-crates .classic-reward-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .results-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-token-line { grid-template-columns: auto minmax(0, 1fr); }
  #run-token-detail { grid-column: 2; text-align: left; }
  .results-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-actions:has(#continue-endless.primary:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .results-actions .btn { min-width: 0; padding-inline: 7px; gap: 6px; overflow-wrap: anywhere; }
  .results-actions .primary { grid-column: 1 / -1; }
}