.play-page {
  max-width: 960px;
  padding-top: 32px;
  padding-bottom: 64px;
}

.wordichi-breadcrumbs {
  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(250, 199, 117, .34);
  background: rgba(255, 253, 242, .78);
  color: #4f452b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.wordichi-breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wordichi-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.wordichi-breadcrumbs li + li::before {
  content: "›";
  color: rgba(79, 69, 43, .58);
  font-weight: 900;
}

.wordichi-breadcrumbs a {
  color: #5a50bb;
  text-decoration: none;
}

.wordichi-breadcrumbs a:hover {
  text-decoration: underline;
}

.wordichi-breadcrumbs [aria-current="page"] {
  color: #2f2f2b;
}

.play-header,
.wordichi-top-hero.play-header {
  min-height: 0;
  margin-bottom: 16px;
  padding-bottom: 0;
  text-align: left;
}

.play-title-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.play-title-row h1 {
  min-width: 0;
  flex: 1 1 auto;
  margin-right: 0;
  text-align: left;
}

.play-create-game {
  flex: 0 0 auto;
  white-space: nowrap;
}

.play-header .wordichi-hero__lead {
  max-width: 780px;
  margin: 0;
  text-align: left;
}

.play-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.play-header-actions .btn-primary,
.play-header-actions .btn-ghost,
.play-empty .btn-primary,
.play-pagination .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.play-panel,
.play-game-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.play-filters {
  padding: 22px;
}

.play-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.play-section-heading h2 {
  font-size: 20px;
}

.play-result-count {
  color: var(--amber-200);
  font-size: 13px;
  font-weight: 900;
}

.play-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.play-filter {
  min-width: 0;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.play-filter summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 900;
}

.play-filter summary::-webkit-details-marker {
  display: none;
}

.play-filter summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--amber-200);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-filter-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.play-filter-links--scroll {
  max-height: 230px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.play-filter-link {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  color: var(--text-muted);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}

.play-filter-link:hover {
  color: var(--text);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

.play-filter-link.active {
  color: var(--amber-200);
  background: rgba(250,199,117,.09);
  border-color: rgba(250,199,117,.32);
}

.play-filter-link > span,
.play-filter-creator {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.play-filter-link i {
  font-style: normal;
}

.play-filter-link small {
  color: inherit;
  opacity: .75;
}

.play-category-content {
  margin-top: 20px;
  padding: 24px;
  color: var(--text-muted);
}

.play-category-content h2,
.play-category-content h3 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--text);
}

.play-category-content h2:first-child,
.play-category-content h3:first-child {
  margin-top: 0;
}

.play-category-content p + p {
  margin-top: 12px;
}

.play-category-content a {
  color: var(--amber-200);
}

.play-results {
  margin-top: 20px;
}

.play-game-list {
  display: grid;
  gap: 16px;
}

.play-game-card {
  padding: 22px;
}

.play-game-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.play-game-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--amber-200);
  font-size: 13px;
  font-weight: 900;
}

.play-game-type:hover {
  color: var(--amber-50);
}

.play-game-card-head time {
  color: var(--text-muted);
  font-size: 12px;
}

.play-game-card-body {
  padding-top: 18px;
}

.play-game-card h2 {
  margin-bottom: 8px;
  font-size: 23px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.play-game-description {
  color: var(--text-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.play-game-clue {
  margin-top: 14px;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-left: 3px solid var(--purple-400);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  overflow-wrap: anywhere;
}

.play-game-meta,
.play-game-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.play-game-meta {
  margin-top: 16px;
}

.play-game-meta div,
.play-game-stats div {
  min-width: 76px;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.play-game-meta dt,
.play-game-stats dt,
.play-creator-name small {
  color: var(--text-muted);
  font-size: 11px;
}

.play-game-meta dd,
.play-game-stats dd {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.play-game-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.play-creator {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.play-creator:hover strong {
  color: var(--amber-200);
}

.play-creator-skin {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 24px;
}

.play-creator-name {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.play-creator-name strong {
  max-width: 220px;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-game-category {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.play-game-category a {
  padding: 6px 9px;
  color: var(--text-muted);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
}

.play-game-category a:hover {
  color: var(--amber-200);
  border-color: rgba(250,199,117,.28);
}

.play-empty {
  padding: 44px 20px;
  text-align: center;
}

.play-empty > span {
  font-size: 42px;
}

.play-empty h2 {
  margin-top: 10px;
  margin-bottom: 6px;
}

.play-empty p {
  margin-bottom: 20px;
  color: var(--text-muted);
}

.play-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 14px;
}

.play-pagination a:last-child {
  justify-self: end;
}

.play-pagination strong {
  text-align: center;
  font-size: 13px;
}

@media (max-width: 760px) {
  .play-page {
    padding: 24px 14px 48px;
  }

  .play-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .play-create-game {
    align-self: stretch;
  }

  .play-filter-grid {
    grid-template-columns: 1fr;
  }

  .play-filter-links--scroll {
    max-height: none;
  }

  .play-game-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .play-game-stats {
    width: 100%;
  }

  .play-game-stats div {
    flex: 1 1 72px;
  }
}

@media (max-width: 520px) {
  .play-section-heading,
  .play-game-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .play-filters,
  .play-game-card,
  .play-category-content {
    padding: 16px;
  }

  .play-pagination {
    grid-template-columns: 1fr 1fr;
  }

  .play-pagination strong {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

.play-game-title-link {
  color: var(--text);
  text-decoration: none;
}

.play-game-title-link:hover {
  color: var(--amber-200);
}

.play-game-detail-page {
  max-width: 960px;
}


.play-game-detail-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.play-game-detail-kicker time {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.play-game-detail-kicker-right {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

.play-game-detail-creator-inline {
  gap: 7px;
}

.play-game-detail-creator-inline .play-creator-skin {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: var(--radius-sm);
  font-size: 18px;
}

.play-game-detail-creator-inline .play-creator-name strong {
  max-width: 180px;
  font-size: 13px;
}


.play-game-detail-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.play-game-back-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  color: #fff;
  background: rgba(17, 16, 39, .9);
  border: 1px solid rgba(255, 205, 112, .78);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}

.play-game-back-list:hover,
.play-game-back-list:focus-visible {
  color: #fff;
  background: rgba(31, 27, 67, .96);
  border-color: var(--amber-200);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), 0 0 0 3px rgba(250, 199, 117, .16);
}

.play-game-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
  gap: 18px;
  margin-top: 0;
}

.play-game-about,
.play-game-detail-section {
  padding: 22px;
}

.play-game-detail-section > h2 {
  margin-bottom: 14px;
  font-size: 19px;
}

.play-game-detail-title-row {
  margin-bottom: 18px;
}

.play-game-about h1 {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: none;
  overflow-wrap: anywhere;
}

.play-game-detail-description {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.play-game-detail-clue {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 4px solid var(--purple-400);
  border-radius: var(--radius);
}

.play-game-detail-clue h3 {
  margin-bottom: 6px;
  color: var(--amber-200);
  font-size: 13px;
}

.play-game-detail-clue p {
  color: var(--text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.play-game-detail-category {
  margin-top: 20px;
}

.play-game-detail-sidebar {
  display: grid;
  align-content: start;
  gap: 16px;
}


.play-game-detail-meta,
.play-game-detail-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.play-game-detail-meta div,
.play-game-detail-stats div {
  min-width: 0;
}

.play-game-play-button {
  min-width: 150px;
}

@media (max-width: 760px) {
  .play-game-detail-grid {
    grid-template-columns: 1fr;
  }

  .play-game-detail-kicker {
    align-items: flex-start;
    flex-direction: column;
  }

  .play-game-detail-kicker-right {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .play-game-play-button {
    width: 100%;
  }
}

.play-game-card-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.play-game-card-bottom .play-game-category {
  margin-top: 0;
}

.play-game-open {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

@media (max-width: 520px) {
  .play-game-card-bottom {
    align-items: stretch;
    flex-direction: column;
  }
}


.play-game-card-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.play-game-list-play,
.play-game-open {
  min-width: 118px;
}

.play-game-list-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.play-game-list-play.is-played,
.play-game-list-play:disabled {
  cursor: default;
  opacity: .72;
  filter: saturate(.65);
}

@media (max-width: 520px) {
  .play-game-card-actions {
    width: 100%;
  }

  .play-game-card-actions > * {
    flex: 1 1 0;
  }
}

body.play-entry-open {
  overflow: hidden;
}

.play-entry-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(10, 7, 18, .76);
  backdrop-filter: blur(6px);
}

.play-entry-modal.is-open {
  display: grid;
}

.play-entry-card {
  position: relative;
  width: min(100%, 440px);
  padding: 30px;
  border: 2px solid rgba(250, 199, 117, .42);
  border-radius: 26px;
  background: linear-gradient(180deg, #fffdf4, #eee2c9);
  color: #2f2f2b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  text-align: center;
}

.play-entry-card h2 {
  margin: 0 0 20px;
  color: #2f2f2b;
  font-family: var(--font-body);
  font-size: 25px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.play-entry-icon {
  margin-bottom: 12px;
  font-size: 45px;
  line-height: 1;
}

.play-entry-actions {
  display: grid;
  gap: 10px;
}

.play-entry-actions a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 14px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
}

.play-entry-guest {
  background: linear-gradient(180deg, #7568dd, #5146b8);
  color: #fff;
  box-shadow: 0 8px 15px rgba(69, 54, 153, .25);
}

.play-entry-guest:hover {
  color: #fff;
  filter: brightness(1.05);
}

.play-entry-signin {
  border: 2px solid rgba(81, 70, 184, .28);
  background: #fffaf0;
  color: #5146b8;
}

.play-entry-signin:hover {
  color: #403694;
  background: #fffdf7;
}

.play-entry-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(62, 49, 91, .1);
  color: #3c3159;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.play-entry-close:hover {
  background: rgba(62, 49, 91, .18);
}

@media (max-width: 520px) {
  .play-entry-card {
    padding: 26px 18px 20px;
    border-radius: 22px;
  }

  .play-entry-card h2 {
    font-size: 21px;
  }
}


.play-game-played-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid rgba(77, 182, 111, 0.34);
  border-radius: 999px;
  background: rgba(77, 182, 111, 0.13);
  color: #b9f3c9;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.play-game-card.is-played {
  border-color: rgba(77, 182, 111, 0.34);
}

.play-game-play-button.is-played,
.play-game-play-button:disabled {
  cursor: default;
  opacity: 0.72;
  filter: saturate(0.65);
  transform: none;
  box-shadow: none;
}

.play-game-detail-main {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 18px;
}

.play-game-share {
  min-width: 0;
  padding: 20px 22px;
}

.play-game-share > h2 {
  margin-bottom: 14px;
  font-size: 19px;
}

.play-game-share-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.play-game-share-link {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.play-game-share-link:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-1px);
}

.play-game-share-link:focus-visible {
  outline: 3px solid rgba(255, 193, 92, .45);
  outline-offset: 2px;
}

.play-game-share-mark {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.play-game-share-link.is-facebook .play-game-share-mark { background: #1877f2; }
.play-game-share-link.is-x .play-game-share-mark { background: #111; }
.play-game-share-link.is-reddit .play-game-share-mark { background: #ff4500; }
.play-game-share-link.is-vk .play-game-share-mark { background: #0077ff; }

.play-game-share-copy {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.play-game-share-url {
  display: block;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: 10px 12px;
  overflow: hidden;
  color: var(--text-muted);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  user-select: all;
}

.play-game-share-url:hover {
  color: var(--amber-200);
  border-color: rgba(255, 193, 92, .36);
}

.play-game-share-url:focus {
  color: var(--text);
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px rgba(239, 159, 39, .16);
}

.play-game-share-copy-button {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(180deg, var(--purple-400) 0%, var(--purple-600) 100%);
  border: 2px solid var(--purple-900);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 0 var(--purple-900);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, background .16s ease, box-shadow .16s ease;
}

.play-game-share-copy-button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.play-game-share-copy-button:active {
  box-shadow: 0 1px 0 var(--purple-900);
  transform: translateY(2px);
}

.play-game-share-copy-button:focus-visible,
.play-game-share-url:focus-visible {
  outline: 3px solid rgba(255, 193, 92, .45);
  outline-offset: 2px;
}

.play-game-share-copy-button.is-copied {
  color: #fff;
  background: linear-gradient(180deg, var(--teal-400) 0%, var(--teal-600) 100%);
  border-color: #084a3a;
  box-shadow: 0 3px 0 #084a3a;
}

.play-game-share-copy-icon {
  font-size: 16px;
  line-height: 1;
}

.play-game-players {
  min-width: 0;
  padding: 22px;
}

.play-game-players > h2 {
  margin-bottom: 14px;
  font-size: 19px;
}

.play-game-player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.play-game-player-card {
  min-width: 0;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.play-game-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.play-game-player-name {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.play-game-player-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-game-player-skin {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 20px;
}

.play-game-player-result {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.play-game-player-result.is-win {
  color: #b9f3c9;
  background: rgba(77,182,111,.13);
  border-color: rgba(77,182,111,.34);
}

.play-game-player-result.is-failed {
  color: #ffbbb3;
  background: rgba(214,87,72,.13);
  border-color: rgba(214,87,72,.34);
}

.play-game-player-preview {
  margin-top: 14px;
}

.play-game-player-preview > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.play-game-player-board {
  display: grid;
  gap: 4px;
}

.play-game-player-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.play-game-player-cell {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  background: rgba(123,127,136,.24);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}

.play-game-player-cell.is-absent { background: #686d78; }
.play-game-player-cell.is-present { background: #c99d2d; }
.play-game-player-cell.is-correct { background: #3e9d61; }
.play-game-player-cell.is-empty { background: rgba(123,127,136,.24); }

.play-game-player-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.play-game-player-meta div {
  min-width: 0;
  padding: 8px 9px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.play-game-player-meta dt {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.play-game-player-meta dd {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.play-game-players-empty {
  color: var(--text-muted);
}

@media (max-width: 520px) {
  .play-game-share {
    padding: 16px;
  }

  .play-game-share-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .play-game-share-link {
    padding-inline: 10px;
  }

  .play-game-share-copy {
    flex-direction: column;
  }

  .play-game-share-copy-button {
    width: 100%;
  }

  .play-game-players {
    padding: 16px;
  }

  .play-game-player-list {
    grid-template-columns: 1fr;
  }
}