/* A quiet celebration for finishing all six field missions. */
.summary-entry { display: flex; align-items: center; gap: 20px; padding: 25px 28px; margin: 30px 0; border: 1px solid #8d7950; background: #302a24; box-shadow: 4px 4px 0 #100c17; }
.summary-entry > svg { color: var(--yellow); width: 36px; height: 36px; }
.summary-entry > span:not(.summary-entry-arrow) { flex: 1; min-width: 0; }
.summary-entry small { display: block; color: #c8b88d; font-size: 10px; margin-bottom: 5px; }
.summary-entry strong { display: block; color: #f0d895; font: 23px/1.7 var(--pixel); }
.summary-entry > span > span { display: block; margin-top: 5px; color: #c6b4a9; font-size: 12px; }
.summary-entry-arrow { color: var(--yellow); font: 24px monospace; }
.summary-entry:hover { background: #3a3028; border-color: #d3ba7a; }
.summary-pending { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 30px 0; padding: 23px; border: 1px dashed #59456b; background: #211a2a; }
.summary-pending > svg { width: 27px; height: 27px; color: #ae8dc6; }
.summary-pending p { margin: 0; flex: 1; color: #bca5cc; font-size: 12px; line-height: 1.9; }
.summary-pending b { color: #d8c3e6; font-weight: 500; }
.summary-pending a { font-size: 11px; color: var(--mint); padding: 10px 0; min-height: 40px; }
.reflection-locked { text-align: center; border: 1px solid #554162; background: #21192a; padding: 65px 25px; }
.reflection-locked > svg { display: block; width: 46px; height: 46px; color: #af94c6; margin: 0 auto 26px; }
.reflection-locked h1 { font: 27px/1.8 var(--pixel); margin: 15px 0 19px; }
.reflection-locked p { font-size: 13px; color: #bea7cf; line-height: 2; margin: 0 0 28px; }
.award-hero { position: relative; isolation: isolate; padding: 44px 30px 37px; text-align: center; border: 1px solid #7e6947; background: #261f2c; box-shadow: 6px 6px 0 #100b17; overflow: hidden; }
.award-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 35%, #77613c32, transparent 65%); }
.award-hero::after { content: ''; position: absolute; inset: 9px; border: 1px solid #8a714b33; pointer-events: none; }
.award-badge { display: grid; place-items: center; width: 105px; height: 105px; margin: 0 auto 26px; color: #f3d993; background: #51432e; clip-path: polygon(20% 0,80% 0,80% 10%,90% 10%,90% 20%,100% 20%,100% 80%,90% 80%,90% 90%,80% 90%,80% 100%,20% 100%,20% 90%,10% 90%,10% 80%,0 80%,0 20%,10% 20%,10% 10%,20% 10%); }
.award-badge svg { width: 55px; height: 55px; filter: drop-shadow(4px 4px 0 #9f7b3a); }
.award-kicker { display: block; font: 10px/1.8 monospace; color: #d1b16d; letter-spacing: 2px; }
.award-label { margin: 12px 0 8px; color: #d2bd9b; font-size: 12px; }
#reflection-award-title { margin: 0; color: #f4dda0; font: 700 40px/1.6 var(--pixel); letter-spacing: -1px; text-shadow: 3px 3px 0 #695032; outline-offset: 8px; }
#reflection-award-title:focus:not(:focus-visible) { outline: none; }
.award-total { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #655936; background: #332d20; color: #d9c797; padding: 7px 14px; margin: 20px 0; font-size: 11px; }
.award-total svg { width: 14px; height: 14px; color: var(--mint); }
.award-total strong { font: 16px var(--pixel); color: #f1db9e; margin-left: 5px; }
.award-description { margin: 0; font-size: 13px; line-height: 2; color: #c4b3c8; }
.award-spark { position: absolute; color: #d8b875; font-size: 22px; }
.award-spark-one { left: 19%; top: 23%; }
.award-spark-two { right: 20%; top: 18%; color: #a995c4; font: 23px monospace; }
.award-spark-three { right: 13%; bottom: 23%; font-size: 14px; color: #b8d599; }
.award-hero.celebrate .award-badge { animation: award-arrive .75s ease-out 1 both; }
.award-hero.celebrate .award-spark { animation: award-sparkle .95s ease-out 1 both; }
.award-hero.celebrate .award-spark-two { animation-delay: .15s; }
.award-hero.celebrate .award-spark-three { animation-delay: .3s; }
@keyframes award-arrive { 0% { opacity: 0; transform: translateY(16px) scale(.9); } 65% { opacity: 1; transform: translateY(-3px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes award-sparkle { 0% { opacity: .2; transform: scale(.5); } 55% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
#view-reflection .reflection-panel { margin-top: 30px; }
#view-reflection .reflection-panel > p:not(.reflection-status) { font-size: 14px; line-height: 2.1; }
.reflection-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 30px 0 5px; }
.reflection-actions .button { min-height: 48px; }
.completion-banner .completion-actions { margin-left: auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.completion-banner .completion-actions .button { margin-left: 0; }
.completion-actions .text-button { text-align: center; font-size: 10px; color: #c4d8b8; min-height: 36px; }
.side-nav [data-summary-link] { color: #dcc58e; }
.side-nav [data-summary-link] > svg { color: var(--yellow); }
.side-nav [data-summary-link].active { color: #f0db9b; border-color: #89734c; background: #352e22; box-shadow: inset 3px 0 #e1c985; }
@media (max-width: 760px) {
  .award-hero { padding: 38px 24px 31px; }
  #reflection-award-title { font-size: 34px; }
  .award-badge { width: 94px; height: 94px; }
  .award-badge svg { width: 48px; height: 48px; }
  .award-spark-one { left: 12%; }
  .award-spark-two { right: 13%; }
  .summary-entry { padding: 24px 21px; gap: 16px; }
  .summary-entry strong { font-size: 21px; }
  .reflection-locked h1 { font-size: 24px; }
}
@media (max-width: 530px) {
  .award-hero { padding: 32px 18px 27px; }
  .award-badge { width: 83px; height: 83px; margin-bottom: 22px; }
  .award-badge svg { width: 43px; height: 43px; }
  #reflection-award-title { font-size: 29px; letter-spacing: -.8px; }
  .award-kicker { font-size: 8px; letter-spacing: 1.5px; }
  .award-label { font-size: 11px; margin-top: 11px; }
  .award-total { margin: 17px 0; }
  .award-description { font-size: 12px; }
  .award-spark { font-size: 16px; }
  .award-spark-one { left: 11%; top: 18%; }
  .award-spark-two { right: 11%; top: 14%; font-size: 18px; }
  .award-spark-three { bottom: 20%; right: 8%; font-size: 10px; }
  .summary-entry { padding: 22px 17px; gap: 12px; }
  .summary-entry > svg { width: 28px; height: 28px; }
  .summary-entry strong { font-size: 20px; }
  .summary-entry small { font-size: 9px; }
  .summary-entry > span > span { font-size: 11px; }
  .summary-entry-arrow { font-size: 20px; }
  .summary-pending { padding: 21px 17px; gap: 12px; }
  .summary-pending p { font-size: 11px; }
  .summary-pending a { margin-left: 39px; }
  .reflection-locked { padding: 47px 20px; }
  .reflection-locked h1 { font-size: 22px; }
  .reflection-locked p { font-size: 12px; }
  #view-reflection .reflection-panel > p:not(.reflection-status) { font-size: 13px; }
  .reflection-actions { gap: 12px; padding-top: 25px; }
  .reflection-actions .button { width: 100%; font-size: 12px; }
  .completion-banner .completion-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 360px) {
  #reflection-award-title { font-size: 26px; }
  .summary-entry strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .award-hero.celebrate .award-badge, .award-hero.celebrate .award-spark { animation: none; }
}