.custom-games { min-width: 0; container-type: inline-size; }
.custom-toolbar { display: flex; justify-content: end; margin-bottom: 12px; }
.custom-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 6px; }
.custom-toolbar-actions > .outline { margin-right: auto; }
.custom-toolbar-actions:has(> .outline:not([hidden])) { width: 100%; }
.custom-status { margin: 0 0 8px; }
.custom-error { color: var(--error); }
.custom-empty { padding-block: 12px; }
.custom-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
.custom-category { min-width: 0; }
.custom-columns:not(.custom-selected) .custom-category[data-category=unplayed] { padding-top: calc(1.3125rem + 6px); }
.custom-category-heading { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: .875rem; line-height: 1.5; }
.custom-category-count { color: var(--muted); font-weight: 400; font-size: .75rem; font-variant-numeric: tabular-nums; }
.custom-category-empty { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.custom-list { margin: 0; padding: 0; list-style: none; }
.custom-game { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; align-items: center; gap: 0 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.custom-game-content { min-width: 0; }
.custom-game-title { font-size: .9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.custom-game-meta { overflow-wrap: anywhere; margin: 2px 0 0; font-size: .6875rem; }
.custom-game-progress { font-size: .6875rem; margin: 3px 0 0; font-variant-numeric: tabular-nums; }
.custom-game-actions { align-self: start; }
.custom-game-actions .custom-play { width: 36px; min-height: 36px; padding: 8px; border-color: transparent; }
.custom-play svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.custom-game-heat { display: block; width: 100%; height: 3px; margin: 5px 0 0; border: 0; background: var(--line); }
.custom-game-heat::-webkit-meter-bar { height: 3px; border: 0; background: var(--line); }
.custom-game-heat::-webkit-meter-optimum-value { background: var(--accent); }
.custom-game-heat::-moz-meter-bar { background: var(--accent); }
.custom-metrics { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 5px 7px; max-width: 10.5rem; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.custom-metrics .custom-active-count { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; min-width: 24px; padding: 2px 0; font-size: inherit; color: var(--accent); }
.custom-active-count svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.custom-active-count:disabled { color: var(--muted); opacity: 1; }
.custom-metric, .custom-rating { display: inline-flex; flex: none; align-items: center; gap: 3px; white-space: nowrap; }
.custom-metric svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.custom-rating > .small { font-size: inherit; }
.custom-stars { display: inline-flex; flex: none; }
.custom-star { position: relative; display: block; width: 13px; height: 13px; color: var(--muted); }
.custom-star:not(:first-child) { display: none; }
.custom-star > svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.custom-star-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--accent); }
.custom-star-fill svg { display: block; width: 13px; height: 13px; max-width: none; fill: currentColor; stroke: currentColor; stroke-width: 1.3; }
.custom-review { grid-column: 1 / -1; margin-top: 3px; }
.custom-review > summary { width: fit-content; max-width: 100%; min-height: 28px; padding: 4px 0; font-size: .6875rem; color: var(--muted); cursor: pointer; }
.custom-review-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 4px; }
.custom-game-answer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.custom-answer { min-width: 6ch; overflow-wrap: anywhere; }
.custom-game-answer button { min-height: 36px; }
.custom-rate { min-width: 0; margin: 0; padding: 0; border: 0; }
.custom-rate legend { padding: 0; }
.custom-rate-options { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.custom-rate-choice { position: relative; display: inline-grid; place-items: center; width: 36px; min-height: 36px; margin: 0; border-radius: 6px; color: var(--muted); cursor: pointer; }
.custom-rate-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; inset: 0; cursor: inherit; }
.custom-rate-star { display: block; pointer-events: none; }
.custom-rate-star svg { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.custom-rate-choice.is-filled { color: var(--accent); }
.custom-rate-choice.is-filled svg { fill: currentColor; }
.custom-rate-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.custom-rate-choice:has(input[aria-disabled=true]) { cursor: wait; opacity: .6; }
.custom-game-notice { grid-column: 1 / -1; margin: 5px 0 0; overflow-wrap: anywhere; }
.custom-game > button { grid-column: 1 / -1; justify-self: start; }
.custom-selected { grid-template-columns: minmax(0, 1fr); max-width: 38rem; }
@container (max-width: 58rem) {
  .custom-columns { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .custom-columns:not(.custom-selected) .custom-category[data-category=unplayed] { padding-top: 0; }
  .custom-category.is-empty { display: none; }
}
@container (max-width: 19rem) {
  .custom-game { grid-template-columns: minmax(0, 1fr) 36px; row-gap: 5px; }
  .custom-metrics { grid-column: 1; justify-content: start; max-width: 100%; }
  .custom-game-actions { grid-column: 2; grid-row: 1 / 3; }
}
.custom-publish-dialog { max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; }
.custom-publish-form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 34px); }
.custom-publish-form > .dialog-heading, .custom-publish-form > .dialog-actions { flex: none; margin: 0; padding: 16px 20px; }
.custom-publish-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 20px; scroll-padding: 12px; }
.custom-publish-body label { margin-bottom: 12px; }
.custom-publish-body label > span { display: block; margin-bottom: 5px; }
.custom-publish-body p { margin: 6px 0 12px; }
.custom-publish-form .dialog-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.custom-publish-form .dialog-heading > button { flex: none; }
@media (hover: hover) { .custom-rate-choice:hover { background: var(--hover); } }
@media (pointer: coarse) {
  .custom-games button, .custom-review > summary, .custom-rate-choice { min-height: 44px; }
  .custom-game-actions .custom-play { width: 36px; min-height: 44px; }
  .custom-rate-choice { width: 44px; }
}
@media (max-width: 440px) {
  .custom-publish-form > .dialog-heading, .custom-publish-form > .dialog-actions { padding: 12px 16px; }
  .custom-publish-body { padding-inline: 16px; }
}
@media (forced-colors: active) {
  .custom-rate-choice.is-filled { color: Highlight; }
  .custom-rate-choice:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
}