.wk-results {
  --wk-brand: #ff8600;
  --wk-action: #c54b00;
  --wk-focus: #e46700;
  --wk-ink: #3f3f3f;
  --wk-muted: #6b6b6b;
  --wk-surface: #fff;
  --wk-surface-warm: #fff7ed;
  --wk-surface-detail: #fffcf8;
  --wk-border: #e46700;
  --wk-line: #ffd9b1;
  --wk-pastel-mint: #dff5f0;
  --wk-pastel-pink: #f9e4f4;
  container-name: wk-results;
  container-type: inline-size;
  position: relative;
  margin: 1.5rem 0;
  overflow: hidden;
  border-top: 4px solid var(--wk-brand);
  border-radius: 2px;
  background: var(--wk-surface);
  box-shadow: 0 8px 28px rgba(35, 35, 35, .08);
  color: var(--wk-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.wk-results *, .wk-results *::before, .wk-results *::after { box-sizing: border-box; }
.wk-results__lightbox, .wk-results__lightbox * { box-sizing: border-box; }
.wk-results::before, .wk-results::after { content: ""; position: absolute; z-index: 0; width: 96px; height: 96px; pointer-events: none; opacity: .45; }
.wk-results::before { top: -50px; right: 7%; background: var(--wk-pastel-mint); border-radius: 38% 62% 45% 55% / 48% 42% 58% 52%; transform: rotate(18deg); }
.wk-results::after { bottom: -65px; left: 5%; background: var(--wk-pastel-pink); border-radius: 55% 45% 58% 42% / 40% 56% 44% 60%; transform: rotate(-18deg); }
.wk-results__controls, .wk-results__count, .wk-results__scroll-hint, .wk-results__table-wrap, .wk-results__pagination, .wk-results__empty { position: relative; z-index: 1; }
.wk-results__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1.15rem; padding: 1.45rem 1.5rem 1.35rem; border-bottom: 1px solid var(--wk-line); background: linear-gradient(90deg, rgba(255, 247, 237, .88), rgba(255, 255, 255, .96)); }
.wk-results__label { display: block; margin-bottom: .46rem; color: var(--wk-action); font-size: .8rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.wk-results__select, .wk-results__search { width: 100%; min-height: 44px; padding: .58rem .75rem; border: 1px solid var(--wk-border); border-radius: 3px; background: var(--wk-surface); color: var(--wk-ink); font: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.wk-results__select, .wk-results__search, .wk-results__pagination button, .wk-results__thumbnail, .wk-results__lightbox-content button { transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.wk-results__select:hover, .wk-results__search:hover { border-color: var(--wk-focus); }
.wk-results__select:focus-visible, .wk-results__search:focus-visible { border-color: var(--wk-focus); outline: 3px solid var(--wk-focus); outline-offset: 2px; }
.wk-results__count { margin: 0; padding: 1rem 1.5rem .7rem; color: var(--wk-muted); font-size: 1rem; font-variant-numeric: tabular-nums; }
.wk-results__scroll-hint { display: none; margin: 0; padding: .15rem 1rem .7rem; color: var(--wk-muted); font-size: .8rem; font-weight: 600; }
.wk-results__table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.wk-results__table-wrap:focus-visible { outline: 3px solid var(--wk-focus); outline-offset: -3px; }
.wk-results__pagination { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .85rem; padding: 1rem 1.5rem; border-top: 1px solid var(--wk-line); }
.wk-results__scroll-hint[hidden], .wk-results__table-wrap[hidden], .wk-results__pagination[hidden] { display: none; }
.wk-results__pagination button { min-height: 44px; padding: .5rem .85rem; border: 1px solid var(--wk-border); border-radius: 3px; background: var(--wk-surface); color: var(--wk-action); font: inherit; font-weight: 700; cursor: pointer; }
.wk-results__pagination button:hover:not(:disabled) { border-color: var(--wk-focus); background: var(--wk-surface-warm); color: var(--wk-action); }
.wk-results__pagination button:focus-visible { outline: 3px solid var(--wk-focus); outline-offset: 2px; }
.wk-results__pagination button:disabled { opacity: .45; cursor: not-allowed; }
.wk-results__pagination span { min-width: 7rem; color: var(--wk-muted); text-align: center; }
.wk-results__table { width: 100%; min-width: 900px; margin: 0; border-collapse: collapse; table-layout: fixed; }
.wk-results__col--rank { width: 9%; }
.wk-results__col--competition { width: 14%; }
.wk-results__col--participants { width: 17%; }
.wk-results__col--result { width: 18%; }
.wk-results__col--puzzle { width: 28%; }
.wk-results__col--pieces { width: 14%; }
.wk-results__table th, .wk-results__table td { padding: .9rem 1.25rem; border: 0; border-bottom: 1px solid var(--wk-line); text-align: left; vertical-align: middle; }
.wk-results__table th:last-child, .wk-results__table td:last-child { padding-inline: .75rem; overflow-wrap: anywhere; }
.wk-results__table th { background: var(--wk-surface-warm); color: var(--wk-action); font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.wk-results__table th:last-child { white-space: normal; }
.wk-results__table th button { display: inline-flex; min-height: 44px; align-items: center; gap: .38rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.wk-results__table th button:hover { color: var(--wk-action); text-decoration: underline; text-decoration-color: var(--wk-brand); text-underline-offset: .2em; }
.wk-results__table th button:focus-visible { outline: 3px solid var(--wk-focus); outline-offset: 2px; }
.wk-results__table tbody tr:hover { background: var(--wk-surface-warm); }
.wk-results__table tbody tr:focus-within { background: var(--wk-surface-warm); }
.wk-results__rank, .wk-results__time { font-variant-numeric: tabular-nums; font-weight: 800; }
.wk-results__rank { color: var(--wk-action); }
.wk-results__competition { color: var(--wk-muted); font-weight: 600; }
.wk-results__type { display: block; margin-top: .16rem; color: var(--wk-action); font-size: .8rem; font-weight: 700; }
.wk-results__name { font-weight: 700; }
.wk-results__name, .wk-results__type, .wk-results__puzzle-name { overflow-wrap: anywhere; }
.wk-results__puzzle-gallery { display: inline-flex; gap: .35rem; margin-right: .5rem; vertical-align: middle; }
.wk-results__puzzle-layout { display: flex; width: 100%; min-width: 0; flex-wrap: nowrap; align-items: center; gap: .5rem; }
.wk-results__thumbnail { display: inline-flex; overflow: hidden; width: 44px; height: 44px; padding: 0; border: 1px solid var(--wk-border); border-radius: 3px; background: var(--wk-surface); vertical-align: middle; cursor: zoom-in; }
.wk-results__puzzle-layout .wk-results__thumbnail { flex: 0 0 44px; }
.wk-results__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.wk-results__thumbnail:hover { border-color: var(--wk-focus); background: var(--wk-surface-warm); }
.wk-results__thumbnail:focus-visible { outline: 3px solid var(--wk-focus); outline-offset: 2px; }
.wk-results__puzzle-name { display: inline-block; min-width: 0; margin-left: .5rem; vertical-align: middle; font-weight: 600; }
.wk-results__puzzle-layout .wk-results__puzzle-name { flex: 1 1 0; margin-left: 0; white-space: normal; }
.wk-results__puzzle-count { font-weight: 600; }
.wk-results__unassigned { color: var(--wk-action); font-size: .8rem; font-weight: 700; }
.wk-results__time > small { display: block; margin-top: .2rem; color: var(--wk-muted); font-size: .8rem; font-weight: 600; }
.wk-results__details-toggle { display: inline-flex; min-height: 44px; align-items: center; gap: .4rem; padding: 0; border: 0; background: transparent; color: var(--wk-action); font: inherit; font-weight: 800; cursor: pointer; text-align: left; }
.wk-results__details-toggle::before { content: ""; flex: 0 0 auto; width: .55em; height: .55em; border-right: 2px solid var(--wk-action); border-bottom: 2px solid var(--wk-action); transform: rotate(-45deg); transition: transform .16s ease; }
.wk-results__details-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.wk-results__details-toggle:hover { text-decoration: underline; text-decoration-color: var(--wk-brand); text-underline-offset: .2em; }
.wk-results__details-toggle:focus-visible { outline: 3px solid var(--wk-focus); outline-offset: 3px; }
.wk-results__details-row[hidden] { display: none; }
.wk-results__details-row { background: var(--wk-surface-detail); }
.wk-results__table tbody .wk-results__details-row:hover { background: var(--wk-surface-detail); }
.wk-results__details-row td { padding-top: 0; padding-bottom: .55rem; vertical-align: top; }
.wk-results__details-spacer { border-bottom-color: transparent; }
.wk-results__details-column { padding-inline: 1.25rem; }
.wk-results__detail-item { display: flex; min-height: 52px; align-items: center; gap: .55rem; border-top: 1px solid var(--wk-line); font-weight: 600; }
.wk-results__detail-outcome, .wk-results__detail-pieces { font-variant-numeric: tabular-nums; }
.wk-results__detail-puzzle { min-width: 0; }
.wk-results__detail-puzzle strong { overflow-wrap: anywhere; }
.wk-results__empty { margin: 0; padding: 2.5rem 1.25rem; background: var(--wk-surface-warm); color: var(--wk-muted); font-weight: 600; text-align: center; }
.wk-no-results { padding: 1rem; border-top: 4px solid var(--wk-brand, #ff8600); background: var(--wk-surface-warm, #fff7ed); color: var(--wk-ink, #3f3f3f); }
.wk-results__lightbox { position: fixed; z-index: 2147483647; inset: 0; display: grid; width: 100%; height: 100%; padding: 20px; place-items: center; border: 0; background: transparent; }
.wk-results__lightbox[hidden] { display: none; }
.wk-results__lightbox-content { position: relative; width: fit-content; max-width: 100%; max-height: 100%; }
.wk-results__lightbox-content img { display: block; max-width: min(900px, calc(100vw - 40px)); max-height: calc(100vh - 40px); padding: 10px; border: 1px solid var(--wk-border, #e46700); border-radius: 3px; background: var(--wk-surface, #fff); object-fit: contain; box-shadow: 0 16px 52px rgba(35, 35, 35, .28); }
.wk-results__lightbox-content button { display: inline-flex; position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--wk-border, #e46700); border-radius: 50%; background: var(--wk-surface, #fff); color: var(--wk-action, #c54b00); font-size: 1.65rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(35, 35, 35, .16); }
.wk-results__lightbox-content button:hover { border-color: var(--wk-focus, #e46700); background: var(--wk-surface-warm, #fff7ed); }
.wk-results__lightbox-content button:focus-visible { outline: 3px solid var(--wk-focus, #e46700); outline-offset: 2px; }
.wk-results__pagination button:active:not(:disabled), .wk-results__thumbnail:active, .wk-results__lightbox-content button:active { transform: translateY(1px); }
@media (max-width: 900px) { .wk-results__controls { grid-template-columns: repeat(2, minmax(170px, 1fr)); } }
@media (max-width: 620px) {
  .wk-results__controls { grid-template-columns: 1fr; padding: 1rem; }
  .wk-results__count { padding-left: 1rem; }
  .wk-results__scroll-hint { display: block; }
  .wk-results__table th, .wk-results__table td { padding: .8rem 1rem; }
  .wk-results__table th:last-child, .wk-results__table td:last-child { padding-inline: .75rem; }
  .wk-results__pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .85rem 1rem; }
  .wk-results__pagination button { width: 100%; min-width: 0; padding-inline: .65rem; white-space: nowrap; }
  .wk-results__pagination [data-wk-page-status] { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .wk-results__pagination [data-wk-page-previous] { grid-column: 1; grid-row: 2; }
  .wk-results__pagination [data-wk-page-next] { grid-column: 2; grid-row: 2; }
}
@media (max-width: 300px) {
  .wk-results__pagination { grid-template-columns: minmax(0, 1fr); }
  .wk-results__pagination [data-wk-page-status] { grid-column: 1; grid-row: 1; }
  .wk-results__pagination [data-wk-page-previous] { grid-column: 1; grid-row: 2; }
  .wk-results__pagination [data-wk-page-next] { grid-column: 1; grid-row: 3; }
}
@container wk-results (max-width: 900px) {
  .wk-results__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wk-results (max-width: 620px) {
  .wk-results__controls { grid-template-columns: 1fr; padding: 1rem; }
  .wk-results__count { padding-left: 1rem; }
  .wk-results__scroll-hint { display: block; }
  .wk-results__table th, .wk-results__table td { padding: .8rem 1rem; }
  .wk-results__table th:last-child, .wk-results__table td:last-child { padding-inline: .75rem; }
  .wk-results__pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .85rem 1rem; }
  .wk-results__pagination button { width: 100%; min-width: 0; padding-inline: .65rem; white-space: nowrap; }
  .wk-results__pagination [data-wk-page-status] { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .wk-results__pagination [data-wk-page-previous] { grid-column: 1; grid-row: 2; }
  .wk-results__pagination [data-wk-page-next] { grid-column: 2; grid-row: 2; }
}
@container wk-results (max-width: 300px) {
  .wk-results__pagination { grid-template-columns: minmax(0, 1fr); }
  .wk-results__pagination [data-wk-page-status] { grid-column: 1; grid-row: 1; }
  .wk-results__pagination [data-wk-page-previous] { grid-column: 1; grid-row: 2; }
  .wk-results__pagination [data-wk-page-next] { grid-column: 1; grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-results__select, .wk-results__search, .wk-results__pagination button, .wk-results__thumbnail, .wk-results__lightbox-content button, .wk-results__details-toggle::before { transition: none; }
}