/* Shared Quantum Go salon shell.  This deliberately sits after the legacy CSS so
   views can migrate from Bulma markup without changing their behaviour first. */
:root {
  --qgo-bg: #1c2321;
  --qgo-panel: #26302c;
  --qgo-panel-raised: #303b35;
  --qgo-line: #4b5a51;
  --qgo-ink: #f2efe6;
  --qgo-muted: #bdc5bd;
  --qgo-sage: #b9d6ae;
  --qgo-sage-ink: #17221b;
  --qgo-copper: #e0ad79;
  --qgo-danger: #ec9b92;
  color-scheme: dark;
}

html, body, #app { min-height: 100%; background: var(--qgo-bg); }
body { color: var(--qgo-ink); font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
.qgo-app { min-height: 100vh; background: radial-gradient(ellipse at 65% -20%, #3c4a3e 0, var(--qgo-bg) 46rem); }
.qgo-app a { color: var(--qgo-sage); }
.qgo-app a:hover { color: #e8f2df; }
.qgo-app .box, .qgo-app .card, .qgo-app .modal-card, .qgo-app .dropdown-content { background: var(--qgo-panel); color: var(--qgo-ink); border: 1px solid var(--qgo-line); border-radius: 10px; box-shadow: 0 14px 34px #0609073d; }
.qgo-app .title, .qgo-app .subtitle, .qgo-app .label, .qgo-app strong, .qgo-app th { color: var(--qgo-ink); }
.qgo-app .help, .qgo-app .has-text-grey, .qgo-app .has-text-grey-light { color: var(--qgo-muted) !important; }
.qgo-app .has-text-danger, .qgo-app .help.is-danger { color: var(--qgo-danger) !important; }
.qgo-app .input, .qgo-app .textarea, .qgo-app .select select { color: var(--qgo-ink); background: #1d2522; border-color: var(--qgo-line); box-shadow: none; }
.qgo-app .input:focus, .qgo-app .textarea:focus, .qgo-app .select select:focus { border-color: var(--qgo-sage); box-shadow: 0 0 0 2px #b9d6ae33; }
.qgo-app .select:not(.is-multiple):not(.is-loading)::after { border-color: var(--qgo-sage); }
.qgo-app .button { background: transparent; color: var(--qgo-ink); border-color: var(--qgo-line); border-radius: 6px; min-height: 2.45em; }
.qgo-app .button:hover:not([disabled]) { border-color: var(--qgo-sage); color: var(--qgo-ink); background: #38463d; }
.qgo-app .button.is-primary, .qgo-app .button.is-success { background: var(--qgo-sage); color: var(--qgo-sage-ink); border-color: var(--qgo-sage); font-weight: 650; }
.qgo-app .button.is-primary:hover:not([disabled]), .qgo-app .button.is-success:hover:not([disabled]) { background: #d0e7c6; color: #111c14; }
.qgo-app .button[disabled] { opacity: .48; }
:is(.qgo-app, .modal) .table { background: transparent; color: var(--qgo-ink); }
:is(.qgo-app, .modal) .table td, :is(.qgo-app, .modal) .table th { border-color: var(--qgo-line); color: inherit; vertical-align: middle; }
:is(.qgo-app, .modal) .table thead td, :is(.qgo-app, .modal) .table thead th { color: var(--qgo-muted); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
:is(.qgo-app, .modal) .table tr:hover { background: #ffffff08 !important; }
:is(.qgo-app, .modal) .pagination-link, :is(.qgo-app, .modal) .pagination-next, :is(.qgo-app, .modal) .pagination-previous { background: var(--qgo-panel); color: var(--qgo-ink); border-color: var(--qgo-line); }
:is(.qgo-app, .modal) .pagination-link.is-current { background: var(--qgo-sage); border-color: var(--qgo-sage); color: var(--qgo-sage-ink); }
.qgo-app .tag { background: #48584d; color: var(--qgo-ink); }
.qgo-app .modal-background { background: #060907c9; }
.qgo-app .modal-card-head, .qgo-app .modal-card-foot { background: #303a34; border-color: var(--qgo-line); }
.qgo-app .modal-card-title { color: var(--qgo-ink); }
.qgo-app :focus-visible { outline: 3px solid var(--qgo-copper); outline-offset: 3px; }
/* Dialogs are mounted beside the routed application, so they need the same
   contrast even while a route is changing or before the shell is visible. */
.modal-card, .modal-content > .box { background: var(--qgo-panel); color: var(--qgo-ink); border: 1px solid var(--qgo-line); }
.modal-card-head, .modal-card-foot { background: var(--qgo-panel-raised); border-color: var(--qgo-line); }
.modal-card-title, .modal-content .title, .modal-content .label { color: var(--qgo-ink); }
.modal-content .input, .modal-content .textarea, .modal-content .select select { background: #1d2522; color: var(--qgo-ink); border-color: var(--qgo-line); }

/* Navigation is intentionally compact: the board remains the visual anchor. */
.qgo-app .salon-nav { min-height: 4.1rem; padding: 0 .85rem; background: #202925; border-bottom: 1px solid var(--qgo-line); box-shadow: none; }
.qgo-app .salon-nav, .qgo-app .salon-nav .navbar-menu, .qgo-app .salon-nav .navbar-start, .qgo-app .salon-nav .navbar-end { align-items: stretch; }
.qgo-app .salon-nav .navbar-item, .qgo-app .salon-nav .navbar-link { color: var(--qgo-muted); background: transparent; }
.qgo-app .salon-nav .navbar-item:hover, .qgo-app .salon-nav .navbar-link:hover, .qgo-app .salon-nav .navbar-link:focus { color: var(--qgo-ink); background: #ffffff0d; }
.qgo-app .salon-wordmark { padding: .45rem .75rem .45rem .2rem; margin-right: .5rem; }
.qgo-app .salon-wordmark img { width: 2.55rem; max-height: 2.55rem; object-fit: contain; }
.qgo-app .salon-nav-links > .navbar-item { border-radius: 5px; margin: .62rem .1rem; padding: .5rem .75rem; }
.qgo-app .salon-nav-account { margin-left: auto; }
.qgo-app .salon-server-notice { color: var(--qgo-danger) !important; font-size: .82rem; }
.qgo-app .salon-account-link { border-left: 1px solid var(--qgo-line); }
.qgo-app .navbar-dropdown { background: var(--qgo-panel-raised); border-color: var(--qgo-line); }
.qgo-app .navbar-dropdown .navbar-item { color: var(--qgo-ink); }

/* Page rhythm shared by lobby, challenge table, rankings, and account forms. */
.qgo-app > .columns, .qgo-app .hero-body > .container, .qgo-app .table-container { max-width: 1180px; margin-left: auto; margin-right: auto; }
.qgo-app .hero { background: transparent; }
.qgo-app .hero-body { padding: 2.5rem 1.25rem; }
.qgo-app .hero .box { margin-bottom: 1.25rem; }
.qgo-app .columns { padding: 1.1rem; }
.qgo-app .field { margin-bottom: 1.1rem; }
.qgo-app .label { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; }
.qgo-app .progress { background: #1b231f; }
.qgo-app .progress::-webkit-progress-value { background: var(--qgo-sage); }
.qgo-app .progress::-moz-progress-bar { background: var(--qgo-sage); }

/* The lobby contains real chat and player data; these classes only give it hierarchy. */
.qgo-app .salon-home { max-width: 1180px; margin: 0 auto; padding: 2.25rem 1.25rem 0; }
.qgo-app .salon-home__eyebrow { color: var(--qgo-copper); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.qgo-app .salon-home__title { margin: .35rem 0 1.35rem; color: var(--qgo-ink); font: 400 clamp(1.9rem, 4vw, 3rem)/1.15 Georgia, serif; }
.qgo-app .salon-home__actions { display: flex; gap: .65rem; flex-wrap: wrap; padding: 1.2rem; background: linear-gradient(115deg, #35463a, #29332e); border: 1px solid var(--qgo-line); border-radius: 10px; }
.qgo-app .salon-home__copy { flex: 1 1 18rem; color: var(--qgo-muted); }
.qgo-app .salon-home__copy strong { display: block; color: var(--qgo-ink); font-size: 1.12rem; margin-bottom: .2rem; }
.qgo-app .salon-home__buttons { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.qgo-app .lobby-column .box { border-radius: 10px; }
.qgo-app .chat-player { border: 1px solid var(--qgo-line); background: #202925; padding: .5rem .65rem; }
.qgo-app .chat-player:hover { border-color: var(--qgo-sage); background: #344139; }

/* Running games are actual server rows, rendered as calm selectable cards. */
.qgo-app .running-game-preview { width: min(100%, 19rem); padding: .85rem; border: 1px solid var(--qgo-line); border-radius: 9px; background: var(--qgo-panel); transition: border-color .16s ease, transform .16s ease; }
.qgo-app .running-game-preview:hover { border-color: var(--qgo-sage); transform: translateY(-2px); }
.qgo-app .running-game-preview img { width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; border-radius: 5px; opacity: .72 !important; }
.qgo-app .running-game-description { display: flow-root; padding: .18rem .15rem .45rem; color: var(--qgo-muted); }
.qgo-app .salon-directory { max-width: 1180px; margin: 0 auto; padding: 2.25rem 1.25rem; }
.qgo-app .salon-directory__header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.qgo-app .salon-directory__title { margin: .25rem 0 0; font: 400 clamp(1.8rem, 4vw, 2.7rem)/1.1 Georgia, serif; color: var(--qgo-ink); }
.qgo-app .salon-empty { padding: 2.25rem; text-align: center; color: var(--qgo-muted); background: var(--qgo-panel); border: 1px dashed var(--qgo-line); border-radius: 9px; }

/* Watch and review retain their authoritative board/state machinery.  The shell
   supplies the same quiet room and readable tools without recreating a board. */
.qgo-app .salon-observe > .columns, .qgo-app .salon-review > .columns { max-width: 1280px; margin: 0 auto; padding: 1.25rem; }
.qgo-app .salon-observe .ui-padding, .qgo-app .salon-review .ui-padding { gap: .85rem; padding: 1rem; background: var(--qgo-panel); border: 1px solid var(--qgo-line); border-radius: 10px; }
.qgo-app .salon-observe textarea[readonly], .qgo-app .salon-review textarea[readonly] { background: #1b231f; color: var(--qgo-muted); border-color: var(--qgo-line); }
.qgo-app .salon-review [readonly][style*="font-family"] { color: var(--qgo-muted); }
.qgo-app .salon-review [readonly][style*="font-family"] > div { background: #344039 !important; color: var(--qgo-ink); }
.qgo-app .salon-observe svg, .qgo-app .salon-review svg { width: 100%; background: #1c221f; }

.qgo-app .footer, .qgo-app .hero-foot { background: transparent; color: var(--qgo-muted); }
.qgo-app .hero-foot .tabs a { color: var(--qgo-muted); border-color: var(--qgo-line); }

@media (max-width: 1023px) {
  .qgo-app .salon-nav .navbar-menu { background: #202925; border-top: 1px solid var(--qgo-line); }
  .qgo-app .salon-nav .navbar-menu.is-active { display: block; }
  .qgo-app .salon-nav-account { margin-left: 0; }
  .qgo-app .salon-nav-links > .navbar-item { margin: 0; border-radius: 0; }
  .qgo-app .navbar-dropdown { border: 0; box-shadow: none; }
}
@media (max-width: 640px) {
  .qgo-app .columns { padding: .7rem; }
  .qgo-app .hero-body { padding: 1.25rem .75rem; }
  .qgo-app .salon-home { padding: 1.25rem .75rem 0; }
  .qgo-app .salon-directory { padding: 1.3rem .75rem; }
  .qgo-app .salon-directory__header { align-items: start; flex-direction: column; }
  .qgo-app .salon-home__actions { padding: 1rem; }
  .qgo-app .two-col-form { flex-direction: column; gap: 0; }
  .qgo-app .table { font-size: .84rem; }
  .qgo-app .table td, .qgo-app .table th { padding: .45em .38em; }
}

/* Base and overlays also apply to pages outside the authenticated route shell. */
html { height: auto; min-height:100%; scrollbar-width:auto; }
html::-webkit-scrollbar { display:initial; }
body { margin:0; }
.modal { color:var(--qgo-ink); }
.modal .box, .modal .modal-card { background:var(--qgo-panel); color:var(--qgo-ink); border:1px solid var(--qgo-line); border-radius:10px; }
.modal-card-head, .modal-card-foot { background:var(--qgo-panel-raised); color:var(--qgo-ink); gap:.6rem; }
.modal-card-body { background:var(--qgo-panel); color:var(--qgo-ink); }
.modal .modal-card-title, .modal strong, .modal .label { color:var(--qgo-ink); }
.modal .help { color:var(--qgo-muted); }
.modal .button { background:transparent; color:var(--qgo-ink); border-color:var(--qgo-line); border-radius:6px; min-height:44px; }
.modal .button.is-primary, .modal .button.is-success { background:var(--qgo-sage); color:var(--qgo-sage-ink); }
.modal .input, .modal .textarea, .modal .select select { background:#1d2522; color:var(--qgo-ink); border-color:var(--qgo-line); }
.modal-close { position:fixed; top:16px; right:16px; width:32px; height:32px; color:var(--qgo-ink); }
.delete { flex-shrink:0; color:var(--qgo-ink); }
.modal :focus-visible, #login-hero :focus-visible { outline:3px solid var(--qgo-copper); outline-offset:3px; }
#login-hero .box { background:#202925ed!important; border:1px solid var(--qgo-line); color:var(--qgo-ink); border-radius:12px; box-shadow:0 20px 50px #0006; }
#login-hero .label, #login-hero .help, #login-hero a { color:var(--qgo-ink); }
#login-hero .input { background:#17221be8; color:var(--qgo-ink); border-color:var(--qgo-line); }
#login-hero .button { border-radius:6px; min-height:44px; }
#login-hero .button.is-success { background:var(--qgo-sage); color:var(--qgo-sage-ink); border-color:var(--qgo-sage); }
#login-hero .hero-foot a { color:var(--qgo-ink); background:#19221bdd; }
#login-hero { min-height:100svh; color:var(--qgo-ink); color-scheme:dark; background-color:#18211e; background-image:url(/static/bg.webp); background-position:center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }
#login-hero .hero-body { display:flex; align-items:center; }
#login-hero .box > .button { margin-bottom:.75rem; }
#login-hero .column { flex:0 1 34rem; width:min(100%,34rem); }
#login-hero .has-icons-left .input { padding-left:3.1rem; }
#login-hero .has-icons-right .input { padding-right:3.1rem; }
#login-hero .icon.is-left { left:.85rem; }
#login-hero .icon.is-right { right:.85rem; }
#login-hero .button:not(.is-success):not(.is-primary):not(.is-text) { background:var(--qgo-panel-raised); color:var(--qgo-ink); border-color:var(--qgo-line); }
#login-hero .button.is-text { color:var(--qgo-sage); background:transparent; border-color:transparent; }
#login-hero .button.is-text:hover:not(:disabled) { color:var(--qgo-ink); background:#ffffff0d; }
#login-hero .dropdown-content { background:var(--qgo-panel-raised); border:1px solid var(--qgo-line); border-radius:8px; box-shadow:0 12px 30px #0007; overflow:hidden; }
#login-hero .dropdown-item.button { color:var(--qgo-ink); border:0; border-radius:0; }
#login-hero .dropdown-item.button:hover:not(:disabled) { background:#ffffff12; }
@media (prefers-reduced-motion:reduce) { .qgo-app .running-game-preview { transition:none; } .qgo-app .running-game-preview:hover { transform:none; } }