/* Reference-derived result layout with local refinements; see ASSET-INVENTORY.md. */
.ds-done[hidden] { display: none !important; }
.ds-done {
  position: absolute; inset: 0; z-index: 10; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 28px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  background: #050a14; isolation: isolate;
  color: #e8f1ff; user-select: text; scrollbar-color: #324b68 #08111f;
}
.ds-done-inner { max-width: 448px; margin: 0 auto; }
.kr-results { display: flex; flex-direction: column; gap: 32px; margin-top: 4px; padding-bottom: 48px; min-width: 0; }
.kr-results *, .kr-results *::before, .kr-results *::after { box-sizing: border-box; }
.kr-results p, .kr-results h2, .kr-results ul { margin: 0; padding: 0; }
.kr-results ul { list-style: none; }
.kr-results button, .kr-results input { font: inherit; }
.kr-results button { cursor: pointer; }
.kr-results button:focus-visible, .kr-results input:focus-visible, .kr-answer-list:focus-visible { outline: 2px solid #4de3ff; outline-offset: 4px; }
.kr-results img { image-rendering: pixelated; flex-shrink: 0; }
.kr-results ::selection { background: #ff5d8f; color: #050a14; }
.kr-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ds-done-brand { font-size: 27px; line-height: 1; letter-spacing: .06em; color: #e8f1ff; text-shadow: -2px 2px #ff5d8f, 2px -2px #4de3ffd9, 0 0 14px #4de3ff4d; }
.kr-result-label { color: #a8bad2; font-size: 15px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.kr-result-score { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.kr-result-score strong { font-size: 88px; line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }
.kr-result-score span { font-size: 22px; line-height: 28px; color: #4de3ff; margin-left: 8px; font-variant-numeric: tabular-nums; }
.kr-score-chart { margin-top: 12px; }
.kr-score-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.kr-score-chart text { font-family: inherit; font-size: 13px; fill: #a8bad2; opacity: 1; }
.kr-score-chart text[fill='#ff5d8f'] { fill: #ff7ba4; }
.kr-score-chart path[stroke] { stroke-opacity: 1; stroke-width: 1.6; }
.kr-score-caption { margin-top: 8px !important; color: #4de3ff; font-size: 16px; line-height: 22px; letter-spacing: .05em; text-transform: uppercase; }
.kr-fathom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: #e8f1ff; font-size: 18px; line-height: 24px; letter-spacing: .08em; text-transform: uppercase; }
.kr-fathom::after { content: ''; border-top: 1px dashed #496383; flex: 1; min-width: 6px; }
.kr-fathom span { flex-shrink: 0; }
.kr-fathom .kr-fathom-detail { color: #a8bad2; font-size: 14px; letter-spacing: .02em; }
.kr-log { padding-bottom: 20px; }
.kr-log .kr-fathom { margin-bottom: 24px; }
.kr-log-chart { height: 200px; position: relative; }
.kr-log-line { position: absolute; inset-inline: 0; border-top: 1px dashed #324b68; }
.kr-log-line span { position: absolute; left: 0; top: -10px; padding-right: 5px; color: #a8bad2; background: #050a14; font-size: 14px; }
.kr-log-columns { position: absolute; inset: 0 0 0 52px; display: grid; grid-template-columns: repeat(var(--rounds), minmax(0, 1fr)); }
.kr-log-column { position: relative; min-width: 0; }
.kr-log-trace { position: absolute; left: 50%; top: 0; width: 2px; height: var(--sink); background: linear-gradient(transparent, var(--tier-color)); opacity: .7; }
.kr-log-sprite { position: absolute; top: var(--sink); left: 50%; transform: translate(-50%, -50%); line-height: 0; animation: kr-result-sink .6s ease-out both; animation-delay: var(--sink-delay); }
.kr-log-sprite img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 3px var(--tier-color)); }
.kr-log-column > span:last-child { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-size: 15px; color: #a8bad2; }
.kr-bearing .kr-fathom, .kr-catch .kr-fathom { margin-bottom: 4px; }
.kr-bearing li { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid #253b56; }
.kr-bearing li.is-current { background: #101d33; box-shadow: inset 3px 0 var(--tier-color); }
.kr-bearing li:last-child { border: 0; }
.kr-bearing-range { width: 66px; flex-shrink: 0; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--tier-color); }
.kr-bearing-copy { flex: 1; min-width: 0; font-size: 18px; line-height: 24px; color: #a8bad2; }
.kr-bearing li.is-current .kr-bearing-copy { color: #e8f1ff; }
.kr-result-actions { display: flex; flex-direction: column; gap: 16px; }
.kr-share-actions { display: flex; gap: 12px; }
.kr-share-actions .btn-descend { flex: 1; }
.kr-results .btn-descend, .kr-results .btn-quiet { clip-path: none; filter: none; border: 0; border-radius: 0; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
.kr-results .btn-descend { color: #050a14; background: #ff5d8f; padding: 12px 18px 10px; font-size: 19px; line-height: 28.5px; box-shadow: 0 0 0 2px #050a14, 0 3px 0 2px #7d1d3c, 0 0 16px #ff5d8f73; }
.kr-results .btn-quiet { color: #e8f1ff; background: #101d33; padding: 11px 16px 9px; font-size: 16px; line-height: 24px; box-shadow: 0 0 0 2px #050a14, 0 0 0 4px #1b3050; }
.kr-results .btn-quiet:hover { color: #4de3ff; box-shadow: 0 0 0 2px #050a14, 0 0 0 4px #4de3ffa6; }
.kr-results .btn-descend:active, .kr-results .btn-quiet:active, .kr-keep-diving:active { transform: translateY(2px); }
.kr-keep-diving { width: 100%; color: #050a14; background: #4de3ff; border: 0; padding: 12px 18px 10px; font-size: 19px !important; line-height: 28.5px; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 0 2px #050a14, 0 3px 0 2px #16758a, 0 0 16px #4de3ff59; }
.kr-keep-diving:hover { background: #8eeeff; }
.kr-result-links { display: flex; flex-wrap: wrap; align-items: start; gap: 16px; margin-top: 8px; }
.kr-copy-status { font-size: 16px; color: #4de3ff; line-height: 1.5; }
.kr-copy-status:empty { display: none; }
.kr-pack-picker { display: flex; flex-wrap: wrap; gap: 12px; }
.kr-pack-picker[hidden] { display: none; }
.kr-catch-row { padding: 16px 0; border-bottom: 1px solid #324b68; }
.kr-catch-row:last-child { border-bottom: 0; }
.kr-catch-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; color: #e8f1ff; border: 0; background: none; text-align: left; }
.kr-catch-number { font-size: 16px; color: #a8bad2; width: 12px; flex-shrink: 0; }
.kr-catch-copy { flex: 1; min-width: 0; }
.kr-catch-prompt { font-size: 15px; line-height: 20px; letter-spacing: .02em; color: #a8bad2; text-transform: uppercase; overflow-wrap: anywhere; }
.kr-catch-answer { font-size: 23px; line-height: 28px; margin-top: 3px !important; overflow-wrap: anywhere; }
.kr-catch-tier { font-size: 15px; line-height: 20px; margin-top: 2px !important; color: var(--tier-color); }
.kr-catch-points { color: var(--tier-color); font-size: 23px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-catch-expand { width: 12px; font-size: 20px; color: #a8bad2; }
.kr-catch-detail { margin: 8px 0 4px; padding-left: 27px; }
.kr-catch-detail[hidden] { display: none; }
.kr-tier-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kr-tier-filter { color: var(--tier-color); font-size: 15px !important; line-height: 22px; padding: 7px 9px; border: 1px solid #496383; border-radius: 0; background: transparent; }
.kr-tier-filter[aria-pressed='true'] { border-color: currentColor; background: #ffffff14; }
.kr-tier-filter span { color: #a8bad2; }
.kr-answer-search { width: 100%; margin-bottom: 8px; padding: 8px 10px; background: #101d33; border: 1px solid #496383; border-radius: 0; color: #e8f1ff; caret-color: #4de3ff; font-size: 18px !important; line-height: 24px; }
.kr-answer-search::placeholder { color: #a8bad2; opacity: 1; }
.kr-answer-list { max-height: 288px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #324b68 #08111f; padding-right: 4px !important; display: flex; flex-direction: column; gap: 4px; }
.kr-answer-list li { display: flex; align-items: start; gap: 8px; padding: 7px 8px; }
.kr-answer-list li.is-player-answer { background: #101d33; box-shadow: inset 2px 0 var(--tier-color); }
.kr-answer-list img { margin-top: 2px; }
.kr-answer-text { min-width: 0; flex: 1; font-size: 18px; line-height: 24px; overflow-wrap: anywhere; }
.kr-your-answer { display: block; font-size: 14px; line-height: 20px; color: #4de3ff; letter-spacing: .04em; }
.kr-answer-fact { display: block; font-size: 15px; line-height: 21px; color: #a8bad2; }
.kr-answer-points { color: var(--tier-color); font-size: 16px; line-height: 24px; margin-left: auto; min-width: 28px; text-align: right; }
.kr-answer-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: #a8bad2; font-size: 14px; }
.kr-logbook .kr-fathom { margin-bottom: 8px; }
.kr-logbook p:last-child { font-size: 18px; color: #a8bad2; line-height: 24px; }
.kr-result-footer { color: #a8bad2; font-size: 14px; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; }
@keyframes kr-result-sink { from { opacity: 0; transform: translate(-50%, calc(-50% - 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.ds-root[data-low-power] .kr-log-sprite { animation: none; }
@media (max-width: 599px) { .ds-done { padding-top: 64px; } .kr-results-head { padding-right: 40px; } }
@media (max-width: 380px) { .ds-done { padding-inline: 18px; } .kr-results-head { gap: 10px; } .kr-result-label { font-size: 14px; } .kr-result-links { gap: 14px; } .kr-results .btn-quiet { padding-inline: 12px; letter-spacing: .08em; } .kr-catch-toggle { gap: 8px; } .kr-catch-detail { padding-left: 0; } .kr-bearing li { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .kr-log-sprite { animation: none; } }
.kr-pearl-reward { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:16px; margin:18px 0; border:1px solid #635380; background:#1e1a32; color:#e0d5ff; font-family:inherit; font-size:18px; text-align:left; cursor:pointer; }
.kr-pearl-reward > span:first-child { display:flex; align-items:center; gap:10px; }
.kr-pearl-reward > span:last-child { font-size:14px; }
.kr-pearl-reward:hover, .kr-pearl-reward:focus-visible { border-color:#d4cbf4; }
@media (max-width:360px) { .kr-pearl-reward { font-size:16px; padding:12px; } .kr-pearl-reward > span:last-child { font-size:12px; } }