/* SPDX-License-Identifier: MIT */

/* The game hub's pages. They sit in the account pages' card
   (.co-account / .co-account-card in the child theme's style.css) and use
   its colours; this adds tables, tokens, badges and a few form layouts. */

.co-gamehub .co-gh-section
{
  margin: 0;
  padding: 20px 0 4px;
  border-top: 1px solid #eef0f4;
}

.co-gamehub .co-account-lede + .co-gh-section,
.co-gamehub .co-notice + .co-gh-section
{
  border-top: 0;
  padding-top: 4px;
}

.co-gamehub .co-gh-section h3
{
  margin: 0 0 6px;
  padding: 0;
  color: var(--co-blue-dark);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  background: none;
  border: 0;
}

.co-gamehub p
{
  margin: 0 0 12px;
  padding: 0;
}

/* Tables */

.co-gamehub .co-gh-table
{
  width: 100%;
  margin: 4px 0 16px;
  border-collapse: collapse;
  border: 0;
  font-size: 13px;
  line-height: 1.4;
}

.co-gamehub .co-gh-table th,
.co-gamehub .co-gh-table td
{
  padding: 7px 8px;
  border: 0;
  border-bottom: 1px solid #eef0f4;
  background: none;
  text-align: left;
  vertical-align: top;
}

.co-gamehub .co-gh-table thead th
{
  border-bottom: 2px solid var(--co-border);
  color: var(--co-blue-dark);
  font-weight: 600;
  white-space: nowrap;
}

.co-gamehub .co-gh-table tr.co-gh-new td
{
  background: #eef7f0;
}

.co-gamehub .co-gh-num
{
  text-align: right !important;
  white-space: nowrap;
}

.co-gamehub .co-gh-actions-cell
{
  text-align: right !important;
  white-space: nowrap;
}

.co-gamehub .co-gh-facts th
{
  width: 140px;
  color: var(--co-blue-dark);
  font-weight: 600;
}

/* Leaderboard rows in the registration form */

.co-gamehub .co-gh-boards td
{
  padding: 4px 4px;
  border-bottom: 0;
}

.co-gamehub .co-gh-boards input[type="text"],
.co-gamehub .co-gh-boards select
{
  height: 34px;
  padding: 4px 8px;
  font-size: 13px;
}

/* Tokens, handles, ids */

.co-gamehub .co-gh-token
{
  display: inline-block;
  padding: 3px 10px;
  background: #f6f8fb;
  border: 1px solid #c4cad6;
  border-radius: 4px;
  color: var(--co-blue-dark);
  font: 600 18px/1.3 "Courier New", Courier, monospace;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

.co-gamehub .co-gh-handle,
.co-gamehub .co-gh-id
{
  font-family: "Courier New", Courier, monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.co-gamehub .co-gh-id
{
  color: var(--co-muted);
}

.co-gamehub .co-gh-big
{
  font-size: 22px;
  color: var(--co-blue-dark);
}

.co-gamehub .co-gh-handle-now
{
  margin: 4px 0 8px;
}

.co-gamehub code
{
  font-family: "Courier New", Courier, monospace;
}

.co-gamehub .co-gh-muted,
.co-gamehub .co-gh-former,
.co-gamehub .co-gh-empty
{
  color: var(--co-muted);
}

.co-gamehub .co-gh-former
{
  font-style: italic;
}

.co-gamehub .co-gh-override
{
  color: #7b2318;
  font-size: 12px;
}

.co-gamehub .co-gh-description
{
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #f6f8fb;
  border: 1px solid #e3e7ee;
  border-radius: 6px;
}

.co-gamehub .co-gh-links
{
  margin: 8px 0 12px;
}

/* Badges */

.co-gamehub .co-gh-badge
{
  display: inline-block;
  margin: 0 4px 2px 0;
  padding: 1px 8px;
  border-radius: 10px;
  background: #eef2f8;
  color: var(--co-blue-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.co-gamehub .co-gh-badge-public { background: #eef7f0; color: #1d5733; }
.co-gamehub .co-gh-badge-link { background: #eef2f8; color: var(--co-blue-dark); }
.co-gamehub .co-gh-badge-private { background: #f1f2f4; color: #4b5260; }
.co-gamehub .co-gh-badge-delisted { background: #fdf8e8; color: #6b5310; }
.co-gamehub .co-gh-badge-suspended,
.co-gamehub .co-gh-badge-deleted { background: #fdf0ee; color: #7b2318; }
.co-gamehub .co-gh-badge-new,
.co-gamehub .co-gh-badge-your-turn { background: #2e8b4f; color: #fff; }

/* Forms */

.co-gamehub .co-gh-inline-form
{
  display: inline;
  margin: 0;
}

.co-gamehub .co-gh-link-button
{
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--co-blue);
  font: 600 13px/1.4 "helvetica neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
}

.co-gamehub .co-gh-link-button:hover,
.co-gamehub .co-gh-link-button:focus
{
  text-decoration: underline;
}

/* A label and input with the button beside them */
.co-gamehub .co-gh-inline-fields
{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 8px 0 12px;
}

.co-gamehub .co-gh-inline-fields .co-field
{
  flex: 1 1 auto;
  max-width: 320px;
  margin: 0;
}

.co-gamehub .co-gh-inline-fields .co-button
{
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  height: 42px;
  line-height: 42px;
}

.co-gamehub .co-gh-pair
{
  display: flex;
  gap: 8px;
  max-width: 320px;
}

.co-gamehub .co-gh-pair input
{
  flex: 1 1 50%;
}

.co-gamehub .co-gh-pair select
{
  flex: 1 1 50%;
}

.co-gamehub input[type="number"]
{
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #c4cad6;
  border-radius: 6px;
  color: var(--co-text);
  font: 15px/1.4 "helvetica neue", Helvetica, Arial, sans-serif;
}

.co-gamehub input[type="number"][aria-invalid="true"]
{
  border-color: #c0392b;
}

/* The theme's #content link colours outrank a class, hence !important */
.co-gamehub a.co-gh-button-link,
.co-gamehub a.co-gh-button-link:visited,
.co-gamehub a.co-gh-button-link:hover,
.co-gamehub a.co-gh-button-link:focus
{
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  line-height: 44px;
}

.co-gamehub .co-gh-button-secondary
{
  background: #fff;
  border: 1px solid var(--co-blue);
  color: var(--co-blue);
}

.co-gamehub .co-gh-button-secondary:hover
{
  background: #eef2f8;
}

.co-gamehub .co-gh-button-danger
{
  background: #c0392b;
}

.co-gamehub .co-gh-button-danger:hover
{
  background: #922b21;
}

.co-gamehub .co-toggle input[type="radio"]
{
  margin-top: 3px;
}

@media (max-width: 600px)
{
  .co-gamehub .co-gh-inline-fields
  {
    flex-direction: column;
    align-items: stretch;
  }

  .co-gamehub .co-gh-table
  {
    display: block;
    overflow-x: auto;
  }
}

/* The visibility choices, full width */
.co-gamehub .co-toggle
{
  display: flex;
}

/* A second form on a page (testers) starts a new section */
.co-gamehub .co-form + .co-form,
.co-gamehub .co-form + .co-gh-section
{
  margin-top: 24px;
  padding-top: 8px;
  border-top: 1px solid #eef0f4;
}

/* The game server: a key just made, shown once, and its buttons */
.co-gamehub .co-gh-key
{
  font-size: 16px;
  letter-spacing: 0.08em;
  white-space: normal;
  word-break: break-all;
  user-select: all;
}

.co-gamehub .co-gh-new-key p:last-child
{
  margin-bottom: 0;
}

.co-gamehub .co-gh-buttons
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 16px;
}

.co-gamehub .co-gh-buttons .co-button
{
  margin: 0;
}

.co-gamehub .co-gh-badge-connected { background: #2e8b4f; color: #fff; }