.panel-companion { position: relative; max-width: 720px; margin: 8px auto 0; padding: 0 20px; }
.panel-links { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 32px; }
.panel-logo { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 32px; list-style: none; border-radius: 2px; }
.panel-logo::-webkit-details-marker { display: none; }
.panel-logo img { display: block; image-rendering: pixelated; opacity: .65; transition: opacity 100ms; }
.panel-logo:hover img, .panel-logo:focus-visible img, .release-log[open] .panel-logo img { opacity: 1; }
/* The random player is a button, its mystery player drawn at twice the row's size and scaled smoothly to it. */
.panel-random { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.panel-random img { image-rendering: auto; }
/* The same message, read out to screen readers; it takes no space on the page. */
.panel-random-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.panel-logo:focus-visible, .active-installs:focus-visible { outline: 1px solid var(--kc3); outline-offset: 3px; }
.active-installs { position: relative; display: block; width: max-content; margin: 0 auto 2px; color: #a47735; font: 11px/1.5 'Courier New', monospace; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.active-installs:hover, .active-installs:focus-visible { color: var(--kc2); }
.panel-companion [data-hint]::after, .release-meta [data-hint]::after { content: attr(data-hint); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 210px; padding: 5px 8px; border: 1px solid #5a3c16; background: #140d05; color: #e0a040; font: 11px/1.4 'Courier New', monospace; text-align: center; white-space: normal; opacity: 0; pointer-events: none; z-index: 1001; }
.panel-companion [data-hint]:hover::after, .panel-companion [data-hint]:focus-visible::after, .release-meta [data-hint]:hover::after, .release-meta [data-hint]:focus-visible::after { opacity: 1; }
.release-log-body { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 1000; width: min(520px, calc(100vw - 48px)); max-height: min(420px, 65vh); overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; border: 1px solid #5a3c16; background: #0e0503; box-shadow: 0 8px 24px #000a; color: var(--kc3); font: 12px/1.6 'Courier New', monospace; }
.release-log[open] summary::after { display: none; }
.release-log.from-header .release-log-body { position: fixed; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.release-log-body h2 { margin: 0 0 14px; color: var(--kc3); font-size: 14px; }
.release-log-body section { margin: 0 0 18px; }
.release-log-body section:last-child { margin-bottom: 0; }
.release-log-body h3 { margin: 0 0 5px; color: var(--kc2); font-size: 12px; }
.release-log-body ul { margin: 0; padding-left: 18px; }
.release-log-body a { color: var(--kc2); }
.release-log-body .release-date { color: #a47735; font-weight: normal; }
.panel-companion .fan-content-policy { margin-top: 26px; font-size: 10px; }
#kc-profile #app { padding-bottom: 26px; }
.site-footer { margin: 22px auto 0; padding: 20px 12px 24px; border-color: #301808; font-size: 11px; letter-spacing: 0; }