/* Shared salon components: the same controls in game, account and dialogs. */
:root, .qgo-app {
  --qgo-bg: #1c2321;
  --qgo-panel: #26302c;
  --qgo-panel-raised: #303b35;
  --qgo-line: #4b5a51;
  --qgo-ink: #f2efe6;
  --qgo-text: var(--qgo-ink);
  --qgo-muted: #bdc5bd;
  --qgo-sage: #b9d6ae;
  --qgo-accent: var(--qgo-sage);
  --qgo-sage-ink: #17221b;
  --qgo-copper: #e0ad79;
  --qgo-danger: #ec9b92;
  --qgo-control-radius: 10px;
  --qgo-panel-radius: 16px;
  --qgo-control-bg: #1d2621;
}
:is(.qgo-app, .modal, [id="login-hero"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: .7rem var(--qgo-control-end, .9rem) .7rem .9rem;
  border: 1px solid var(--qgo-line);
  border-radius: var(--qgo-control-radius);
  background-color: var(--qgo-control-bg);
  color: var(--qgo-ink);
  font: inherit;
  line-height: 1.4;
  box-shadow: inset 0 1px 3px #0002;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
:is(.qgo-app, .modal, [id="login-hero"]) :is(input, textarea)::placeholder { color: #a6b3a7; opacity: 1; }
:is(.qgo-app, .modal, [id="login-hero"]) :is(input, textarea, select):hover:not(:disabled):not(:focus) { border-color: #798f7a; }
:is(.qgo-app, .modal, [id="login-hero"]) :is(input, textarea, select):focus-visible {
  border-color: var(--qgo-sage);
  outline: 2px solid var(--qgo-copper);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px #b9d6ae12;
}
:is(.qgo-app, .modal, [id="login-hero"]) :is(input, textarea, select):disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
:is(.qgo-app, .modal, [id="login-hero"]) textarea[readonly] { color: var(--qgo-muted); line-height: 1.7; }
:is(.qgo-app, .modal, [id="login-hero"]) .select select,
:is(.qgo-app, .modal, [id="login-hero"]) select {
  --qgo-control-end: 2.75rem;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b9d6ae' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}
.select::after { display: none; }
:is(.qgo-app, .modal, [id="login-hero"]) option { background: var(--qgo-panel); color: var(--qgo-ink); }
:is(.qgo-app, .modal, [id="login-hero"]) input[type="file"] { padding: .35rem; }
input::file-selector-button {
  border: 0; border-radius: 7px; padding: .5rem .7rem; margin-right: .7rem;
  background: var(--qgo-panel-raised); color: var(--qgo-ink); font: inherit; cursor: pointer;
}
:is(.qgo-app, .modal, [id="login-hero"]) :is(.button, .qgo-primary, .qgo-secondary, .qgo-point) {
  border-radius: var(--qgo-control-radius);
  min-height: 44px;
  padding: .65rem 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
:is(.qgo-app, .modal, [id="login-hero"]) .button.is-small { font-size: .86rem; min-height: 40px; padding: .5rem .75rem; }
:is(.qgo-app, .modal, [id="login-hero"]) .button.is-danger { color: var(--qgo-danger); background: #61393244; border-color: #a56f65; }
:is(.qgo-app, .modal, [id="login-hero"]) .button.is-danger:hover:not(:disabled) { background: #61393288; }
:is(.qgo-app, .modal, [id="login-hero"]) :is(.button.is-success, .button.is-primary, .qgo-primary) {
  background: var(--qgo-sage); color: var(--qgo-sage-ink); border-color: var(--qgo-sage);
}
:is(.qgo-app, .modal, [id="login-hero"]) :is(.button.is-success, .button.is-primary, .qgo-primary):hover:not(:disabled) {
  background: #d0e7c6; color: #111c14;
}
:is(.qgo-app, .modal, [id="login-hero"]) :is(button, a, summary):focus-visible { outline: 2px solid var(--qgo-copper); outline-offset: 3px; }
:is(.qgo-app, .modal, [id="login-hero"]) .label { font-size: .85rem; letter-spacing: .015em; text-transform: none; color: var(--qgo-muted); }
:is(.qgo-app, .modal, [id="login-hero"]) .help { font-size: .82rem; line-height: 1.6; }
:is(.qgo-app, .modal, [id="login-hero"]) .help:empty { display: none; }
:is(.qgo-app, .modal, [id="login-hero"]) .has-icons-left input { padding-left: 2.5rem; }
:is(.qgo-app, .modal, [id="login-hero"]) .icon.is-left { color: var(--qgo-muted); pointer-events: none; }
:is(.qgo-app, .modal, [id="login-hero"]) .checkbox { display: inline-flex; gap: .65rem; align-items: center; min-height: 44px; }
:is(.qgo-app, .modal, [id="login-hero"]) input:is([type="checkbox"], [type="radio"]):not([role="switch"]) {
  appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 0;
  border: 1px solid #819383; border-radius: 6px; background: var(--qgo-control-bg); cursor: pointer;
}
:is(.qgo-app, .modal, [id="login-hero"]) input[type="checkbox"]:checked:not([role="switch"]) {
  border-color: var(--qgo-sage); background: var(--qgo-sage) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%2317221b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(.qgo-app, .modal, [id="login-hero"]) input[type="radio"] { border-radius: 50%; }
:is(.qgo-app, .modal, [id="login-hero"]) input[type="radio"]:checked { background: var(--qgo-sage); box-shadow: inset 0 0 0 5px var(--qgo-control-bg); }
.qgo-switch { position: relative; display: inline-flex; align-items: center; gap: .75rem; min-height: 46px; cursor: pointer; }
.qgo-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.qgo-switch__track { display: flex; align-items: center; flex-shrink: 0; width: 46px; height: 27px; padding: 3px; border-radius: 999px; background: #56635a; border: 1px solid #839181; transition: background-color .15s; }
.qgo-switch__thumb { width: 19px; height: 19px; background: #f2efe6; border-radius: 50%; box-shadow: 0 1px 3px #0004; transition: transform .15s; }
.qgo-switch input:checked + .qgo-switch__track { background: var(--qgo-sage); border-color: var(--qgo-sage); }
.qgo-switch input:checked + .qgo-switch__track .qgo-switch__thumb { transform: translateX(19px); background: var(--qgo-sage-ink); }
.qgo-switch input:focus-visible + .qgo-switch__track { outline: 2px solid var(--qgo-copper); outline-offset: 4px; }
.qgo-switch__label { color: var(--qgo-muted); font-size: .9rem; }
.qgo-switch input:disabled ~ span { opacity: .5; }
.qgo-app input[type="range"] { border: 0; border-radius: 0; box-shadow: none; appearance: none; width: 100%; height: 36px; margin: .3rem 0; background: transparent; cursor: pointer; }
.qgo-app input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: var(--qgo-line); border-radius: 999px; }
.qgo-app input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; margin-top: -7.5px; border: 3px solid var(--qgo-panel); border-radius: 50%; background: var(--qgo-sage); box-shadow: 0 0 0 1px var(--qgo-sage); }
.qgo-app input[type="range"]::-moz-range-track { height: 5px; background: var(--qgo-line); border-radius: 999px; }
.qgo-app input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--qgo-panel); border-radius: 50%; background: var(--qgo-sage); box-shadow: 0 0 0 1px var(--qgo-sage); }
:is(.qgo-app, .modal, [id="login-hero"]) :is(.box, .modal-card, .card, .salon-home__actions, .salon-empty, .qgo-result) { border-radius: var(--qgo-panel-radius); }
.modal-card { box-shadow: 0 30px 90px #0008; }
.modal-card-head { padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--qgo-line); }
.modal-card-title { margin: 0; font: 1.5rem/1.25 Georgia, serif; }
.modal-card-body { padding: 1.5rem; }
.modal-card-foot { padding: 1rem 1.5rem; border-top: 1px solid var(--qgo-line); flex-wrap: wrap; }
.modal .two-col-form { gap: 1.2rem; }
.modal :is(.modal-close,.delete) { background-size: 12px 12px; background-repeat: no-repeat; background-position: center; width: 36px; height: 36px; }
.qgo-app .notification { background: var(--qgo-panel-raised); color: var(--qgo-ink); border: 1px solid var(--qgo-line); border-radius: 12px; }
:is(.qgo-app, .modal) .table { border-collapse: separate; border-spacing: 0; }
:is(.qgo-app, .modal) .table th, :is(.qgo-app, .modal) .table td { border: 0; border-bottom: 1px solid #4b5a515e; padding: .8rem .85rem; }
:is(.qgo-app, .modal) .table thead th, :is(.qgo-app, .modal) .table thead td { background: #202925; }
:is(.qgo-app, .modal) .table abbr { text-decoration: none; }
:is(.qgo-app, .modal) .table tbody tr:last-child td { border-bottom: 0; }
:is(.qgo-app, .modal) .table-container { border: 1px solid var(--qgo-line); border-radius: 12px; background: var(--qgo-panel); }
.qgo-page { max-width: 1180px; padding: 2.25rem 1.25rem; margin: auto; }
.qgo-page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.qgo-page-header h1 { margin: .25rem 0 0; font: 400 clamp(1.8rem,4vw,2.7rem)/1.15 Georgia,serif; }
.qgo-app .salon-account-menu { padding: 0; }
.qgo-app .salon-account-link { gap: .6rem; border: 0; border-radius: 10px; margin: .65rem 0 .65rem .5rem; }
.qgo-app .salon-account-link .icon { color: var(--qgo-sage)!important; }
.salon-account-label { max-width: 12rem; text-overflow: ellipsis; overflow: hidden; }
.qgo-app .salon-account-menu .navbar-dropdown { display: none; border-radius: 12px; padding: .45rem; top: calc(100% - .2rem); box-shadow: 0 14px 38px #0005; z-index: 32; }
.qgo-app .salon-account-menu.is-active .navbar-dropdown { display: block; }
.qgo-app .salon-account-menu .navbar-dropdown .navbar-item { border: 0; background: transparent; border-radius: 7px; width: 100%; font: inherit; text-align: left; min-height: 42px; }
.qgo-app .salon-account-menu .navbar-dropdown .navbar-item:hover { background: #ffffff0d; }
.qgo-app .navbar-divider { border-color: var(--qgo-line); }
.salon-account-backdrop { position: fixed; inset: 0; border: 0; background: transparent; z-index: 30; cursor: default; }
.salon-account-menu.is-active > .salon-account-link { position: relative; z-index: 31; }
.qgo-app .salon-nav-links > a[aria-current="page"] { background: #b9d6ae16; color: var(--qgo-sage); }
.qgo-app .salon-lobby-columns { max-width: 1180px; margin: auto; padding: 1.25rem; }
.qgo-player-filter { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: .85rem; }
.qgo-player-filter > input { width: 100%; }
.qgo-app .chat-player { display: block; text-align: left; font: inherit; color: var(--qgo-ink); width: 100%; border-radius: 10px; min-height: 44px; }
.qgo-app .lobby-column #chat { min-height: 220px; margin: .7rem 0; }
.qgo-lobby-compose { display: flex; gap: .65rem; }
.qgo-lobby-compose input { flex: 1; width: 0; }
/* Button tabs share one segmented surface, including dialogs outside the app. */
:is(.qgo-app, .modal) .tabs:not(.qgo-legal-links) ul {
  display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap;
  gap: .25rem; padding: .25rem; border: 1px solid var(--qgo-line);
  border-radius: 13px; background: var(--qgo-control-bg);
}
:is(.qgo-app, .modal) .tabs:not(.qgo-legal-links) li { display: inline-flex; align-items: stretch; border-radius: 9px; }
:is(.qgo-app, .modal) .tabs button {
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--qgo-muted); font: inherit; font-weight: 600; cursor: pointer;
  min-height: 40px; padding: .4rem 1rem; line-height: 1.25;
}
:is(.qgo-app, .modal) .tabs button:hover { background: var(--qgo-panel-raised); color: var(--qgo-ink); }
:is(.qgo-app, .modal) .tabs .is-active button {
  background: var(--qgo-sage); color: var(--qgo-sage-ink); box-shadow: 0 2px 5px #0002;
}
:is(.qgo-app, .modal) .pagination { flex-wrap: wrap; }
:is(.qgo-app, .modal) .pagination-list { flex-wrap: wrap; justify-content: center; margin: 0; }
:is(.qgo-app, .modal) .pagination button { min-height: 40px; min-width: 40px; border-radius: 10px; }
.qgo-app .qgo-settings .box > .field:not(:last-child) { padding-bottom: 1rem; border-bottom: 1px solid #4b5a515e; }
.qgo-app .qgo-settings .field-body .field { margin-bottom: 0; }
.qgo-app .qgo-settings .field-label { flex-basis: 12rem; text-align: left; padding-top: .75rem; }
@media (max-width: 768px) {
  .qgo-page { padding: 1.3rem .75rem; }
  .qgo-page-header { align-items: flex-start; flex-wrap: wrap; }
  .modal { padding: .65rem; }
  .modal-card-head, .modal-card-body, .modal-card-foot { padding: 1rem; }
  .modal .two-col-form { flex-direction: column; gap: 0; }
  .qgo-app .salon-lobby-columns { padding: .75rem; }
  .qgo-app .salon-account-menu .navbar-dropdown { position: relative; top: 0; margin-bottom: .75rem; }
  .qgo-app .salon-account-menu { display: block; }
  .qgo-app .qgo-settings .field-body { display: flex; flex-wrap: wrap; gap: 1rem; }
  .qgo-app .qgo-settings .field-body > .field { flex: 1 1 90px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.qgo-app, .modal, [id="login-hero"]) :is(input, textarea, select, button), .qgo-switch__track, .qgo-switch__thumb { transition: none; }
}
@media (forced-colors: active) {
  .qgo-switch__track { border: 2px solid ButtonText; }
  .qgo-switch__thumb { background: ButtonText; }
  .qgo-switch input:checked + .qgo-switch__track { background: Highlight; }
  :is(.qgo-app,.modal,[id="login-hero"]) input:is([type="checkbox"],[type="radio"]):not([role="switch"]) { appearance: auto; }
  :is(.qgo-app,.modal,[id="login-hero"]) .select select,
  :is(.qgo-app,.modal,[id="login-hero"]) select { appearance:auto; background-image:none; }
}
.qgo-settings__title { margin: 0 0 1.5rem; font: 400 clamp(1.8rem,4vw,2.7rem)/1.15 Georgia,serif; }
.qgo-app .qgo-settings .hero-body { padding-top: 1.3rem; }
.qgo-app .qgo-settings-section { padding: 1.5rem; }
.qgo-app .notification { position: relative; padding-right: 3rem; }
.qgo-app .notification .delete { position: absolute; right: .7rem; top: .7rem; width: 28px; height: 28px; background-size: 12px 12px; background-position: center; background-repeat: no-repeat; }
.salon-home__resources { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.salon-resource { padding: 1.25rem; background: #26302c99; border: 1px solid var(--qgo-line); border-radius: var(--qgo-panel-radius); }
.salon-resource h2 { font: 400 1.4rem/1.2 Georgia,serif; color: var(--qgo-ink); margin: 0 0 .65rem; }
.salon-resource p { color: var(--qgo-muted); font-size: .9rem; margin: 0 0 1.1rem; }
.qgo-app .running-game-preview { color: var(--qgo-ink); font: inherit; text-align: left; height: auto; }
.qgo-app .running-game-description { overflow-wrap: anywhere; }
:is(.qgo-app, .modal) .pagination button { font: inherit; cursor: pointer; padding: .5rem; }
:is(.qgo-app, .modal) .pagination button:disabled { opacity: .45; cursor: default; }
@media (max-width:640px) { .salon-home__resources { grid-template-columns: minmax(0,1fr); } }
.qgo-origin-toggle { display: block; margin: .75rem auto; padding: .55rem .8rem; border: 1px solid var(--qgo-line); border-radius: 10px; }
.qgo-origin-toggle[aria-pressed="true"] { color: var(--qgo-sage); border-color: var(--qgo-sage); background: #b9d6ae12; }
.qgo-history-chip { background: var(--qgo-panel-raised); color: var(--qgo-ink); min-height: 32px; display: flex; align-items: center; }
.qgo-watchers { display: flex; flex-wrap: wrap; gap: .5rem; }
.qgo-watcher { border: 1px solid var(--qgo-line); border-radius: 999px; color: var(--qgo-muted); padding: .2rem .7rem; font-size: .85rem; }
.qgo-shared-chat > textarea { width: 100%; }

/* Profile content stays inside the dialog, with tabs and page controls in reach. */
.qgo-profile-dialog .modal-card-body { display:flex; flex-direction:column; gap:12px; }
.qgo-profile-dialog .qgo-profile-tabs { flex:none; margin:0; }
.qgo-profile-dialog .qgo-profile-tabs ul { width:100%; }
.qgo-profile-dialog .qgo-profile-tabs li { flex:1; }
.qgo-profile-dialog .qgo-profile-tabs button { width:100%; min-height:44px; }
.qgo-profile-dialog .table-container { flex:1 1 auto; min-height:0; margin:0; }
:is(.qgo-app,.modal) .table thead th { position:sticky; top:0; z-index:1; }
.qgo-profile-dialog .table { font-size:.88rem; }
.qgo-profile-dialog .table th, .qgo-profile-dialog .table td { padding:.6rem .7rem; }
.qgo-profile-pagination { display:flex; align-items:center; justify-content:center; gap:12px; flex:none; }
.qgo-profile-page-label { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--qgo-muted); }
.qgo-profile-dialog .qgo-profile-page-label input { width:3.5rem; min-height:40px; padding:.4rem; text-align:center; }
.qgo-profile-dialog .table td:last-child .button + .button { margin-left:.35rem; }
.qgo-profile-dialog .table td:last-child { white-space:nowrap; }
@media(max-width:640px) {
  .qgo-profile-dialog .table th, .qgo-profile-dialog .table td { padding:.5rem; }
  .qgo-profile-pagination { gap:6px; }
  .qgo-profile-page-label { gap:5px; font-size:.85rem; }
}

/* Profile game history becomes a compact, locally scrolling card list on phones.
   The table heading remains in the accessibility tree; data-label supplies the
   visible label for each value. */
@media (max-width: 640px) {
  .qgo-profile-dialog .table-container {
    max-block-size: min(52dvh, 31rem);
    min-block-size: 0;
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .qgo-profile-dialog .table,
  .qgo-profile-dialog .table tbody {
    display: block;
    inline-size: 100%;
  }

  .qgo-profile-dialog .table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .qgo-profile-dialog .table tbody {
    display: grid;
    gap: .55rem;
  }

  .qgo-profile-dialog .table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem .65rem;
    padding: .65rem;
    border: 1px solid var(--qgo-line);
    border-radius: var(--qgo-panel-radius);
    background: var(--qgo-panel-raised);
    white-space: normal !important;
  }

  .qgo-profile-dialog .table td,
  .qgo-profile-dialog .table td:last-child {
    display: flex;
    min-inline-size: 0;
    min-block-size: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .08rem;
    padding: 0;
    border: 0;
    color: var(--qgo-ink);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .qgo-profile-dialog .table td::before {
    content: attr(data-label);
    color: var(--qgo-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* Game name and actions describe the whole card; the remaining values pair. */
  .qgo-profile-dialog .table td:nth-child(3),
  .qgo-profile-dialog .table td:nth-child(8) {
    grid-column: 1 / -1;
  }

  .qgo-profile-dialog .table td:nth-child(3) {
    padding-block: .1rem .2rem;
    color: var(--qgo-sage);
    font-weight: 650;
  }

  .qgo-profile-dialog .table td:nth-child(8) {
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    padding-block-start: .2rem;
  }

  .qgo-profile-dialog .table td:nth-child(8)::before {
    margin-inline-end: auto;
  }

  .qgo-profile-dialog .table td:nth-child(8) .button {
    min-inline-size: 44px;
    min-block-size: 40px;
    padding: .45rem .65rem;
  }

  .qgo-profile-dialog .table td:nth-child(8) .button + .button {
    margin-inline-start: 0;
  }
}

.modal a:not(.button) { color:var(--qgo-sage); }
.modal a:not(.button):hover { color:var(--qgo-ink); }
:is(.qgo-app,.modal) .button { white-space:normal; max-width:100%; overflow-wrap:anywhere; }
.modal.qgo-video-dialog .tabs ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
.modal.qgo-video-dialog .tabs li, .modal.qgo-video-dialog .tabs button { width:100%; }
.modal.qgo-video-dialog .tabs button { padding:.5rem; min-height:44px; font-size:.9rem; }
@media(max-width:640px) { .qgo-profile-dialog .table td:nth-child(8) .button { min-block-size:44px; } }