/* The Royal Game of Ur. Copyright (C) 2026 MrSuttonmann. GNU AGPL-3.0 or later; see LICENSE. */

/* Honours: the list in the Chronicle, the note announcing new ones, and the Share result button. */

/* the medal: gold once earned, a faint outline until then */
.medal-art .medal-ribbon { fill: var(--vermilion); fill-opacity: .85; }
.medal-art .medal-disc { fill: var(--ochre); }
.medal-art .medal-star { fill: var(--bone); stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
.medal-art:not(.earned) .medal-ribbon, .medal-art:not(.earned) .medal-disc, .medal-art:not(.earned) .medal-star { fill: var(--paper-deep); }
.medal-art:not(.earned) { opacity: .55; }

/* the list in the Chronicle's Honours tab */
.honours { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.honour { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--paper); border: 1.5px solid var(--paper-deep); border-radius: var(--hand); }
.honour.earned { border-color: var(--ochre); background: #fbf2d8; }
.honour .medal-art { flex: none; width: 36px; height: 44px; }
.honour b { display: block; font-weight: 600; }
.honour span { display: block; font-family: var(--f-note); font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.honour small { display: block; font-family: var(--f-note); font-style: italic; font-size: 13px; color: var(--green); }

/* "Honour earned": a note pinned near the top of the screen once the end banner has gone */
.honour-note {
  position: fixed; left: 50%; top: 16px; z-index: 75; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); padding: 10px 18px 10px 12px; transform: translateX(-50%) rotate(-1deg); cursor: pointer;
  background: var(--bone); border: 2px solid var(--ink); border-radius: 10px 7px 11px 6px; box-shadow: 3px 4px 0 var(--ink);
  animation: honour-note-in .45s cubic-bezier(.2,1.4,.4,1) both;
}
.honour-note[hidden] { display: none; }
.honour-note .medal-art { flex: none; width: 34px; height: 41px; }
.honour-note b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 19px; color: var(--vermilion); }
.honour-note span { display: block; max-width: 380px; font-weight: 600; }
@keyframes honour-note-in { from { opacity: 0; transform: translate(-50%, -30px) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .honour-note { animation: none; } }

/* Share result, under the result beside the dice */
.status .share-result { margin-top: 6px; padding: 4px 12px; font-size: 15px; }