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

/* The footer: colophon, credits and link buttons. */

/* footer: a quiet colophon under the game */
.foot { margin-top: 18px; padding-inline: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 15px; color: var(--ink-soft); }
.foot .flourish { width: min(240px, 70%); }
.foot .flourish-line { stroke: var(--ink-soft); stroke-width: 1.4; }
.foot p { margin: 0; text-wrap: pretty; }
.foot-title { font-family: var(--f-display); font-size: 19px; color: var(--ink); }
.foot a { color: var(--vermilion); text-underline-offset: 2px; }
.foot a:focus-visible { outline: 2px dashed var(--vermilion); outline-offset: 2px; }
/* credits and licence: a small ruled colophon, a label beside each line */
.colophon { width: min(100%, 580px); margin: 16px 0 0; text-align: left; border-top: 1px dashed var(--ink-soft); }
.colophon div { display: grid; grid-template-columns: 6.5em 1fr; gap: 4px 14px; padding: 10px 6px; border-bottom: 1px dashed var(--ink-soft); }
.colophon dt { font-family: var(--f-display); font-size: 15px; color: var(--vermilion); }
.colophon dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 480px) { .colophon div { grid-template-columns: 1fr; } }
/* footer link buttons: each brand's colours, drawn in the page's hand-inked style */
.foot-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 6px 0 2px; }
.brand-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; text-decoration: none;
  font-weight: 600; font-size: 15px; border: 2px solid var(--ink); border-radius: var(--hand); box-shadow: 2px 3px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.brand-btn svg { width: 22px; height: 22px; flex-shrink: 0; overflow: visible; }
.brand-btn.gh { background: #24292f; color: #ffffff; }
.brand-btn.bmc { background: #ffdd00; color: #000000; }
.brand-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--ink); }
.brand-btn:active { transform: translate(1px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.brand-btn:focus-visible { outline: 2.5px dashed var(--vermilion); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .brand-btn { transition: none; } }
/* the coffee cup on Buy me a coffee */
.coffee-steam { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.coffee-cup { fill: #fffaf0; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.coffee { fill: var(--vermilion); fill-opacity: .85; }
.coffee-cup-handle { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }