.language { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.language select, input, textarea { color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; }
.login { max-width: 680px; margin: 8vh auto; gap: 20px; }
.login h1 { line-height: 1.3; }
.login form { display: grid; gap: 12px; }
.login textarea { width: 100%; resize: vertical; min-height: 100px; }
.login ol { padding-left: 22px; display: grid; gap: 10px; }
.login .open { width: fit-content; border: 0; cursor: pointer; }
.login-progress { color: var(--cobalt); font-weight: 700; }
.login-steps { display: grid; gap: 10px; }
.login-step { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.login-step.is-active { border-color: var(--cobalt); }
.login-step-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; background: var(--inset); text-align: left; cursor: pointer; font: 600 15px/1.4 var(--body); }
.login-step-toggle:disabled { cursor: default; }
.login-step-toggle:focus-visible { outline-offset: -3px; }
.login-step-number { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--chip); color: var(--ink-2); }
.is-active .login-step-number { color: var(--surface); background: var(--cobalt); }
.is-complete:not(.is-active) .login-step-number { color: var(--good); background: var(--good-soft); }
.login-step-mark { margin-left: auto; color: var(--muted); }
.is-complete .login-step-mark { color: var(--good); }
.login-step-content { display: grid; gap: 16px; padding: 18px; }
.login [hidden] { display: none; }
.login-key { color: var(--cobalt); font-weight: 750; }
.login-note { display: grid; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 0 8px 8px 0; color: var(--ink); }
.login-note > strong { color: var(--warn); }
.login code { display: inline-block; max-width: 100%; margin-top: 6px; padding: 5px 8px; border-radius: 6px; background: var(--inset); font: 12px/1.6 var(--mono); overflow-wrap: anywhere; }
.login .login-instructions { margin: 0; gap: 14px; }
.login-instructions li::marker { color: var(--cobalt); font-weight: 700; }
.login-profile { display: grid; gap: 4px; padding: 14px; background: var(--inset); border-radius: 8px; overflow-wrap: anywhere; }
.login-profile small { color: var(--muted); }
.login-success { color: var(--good); font-weight: 600; }
.login-navigation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.login-navigation:empty { display: none; }
.login .open, .login .ghost { line-height: 1.4; white-space: normal; }
.login .ghost { font: 500 13px/1.4 var(--body); letter-spacing: normal; text-transform: none; }
.login .ghost:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.login-error { padding: 12px 14px; border-radius: 8px; background: var(--crit-soft); }
.error { color: var(--crit); }
.page-error { margin: 12px auto; }
/* the account menu: see the block at the end */
button:disabled { opacity: .55; cursor: wait; }
.db td.cellwrap { white-space: normal; min-width: 180px; max-width: 430px; line-height: 1.7; }
.db td small.error { display: block; }
.metric { cursor: help; border-bottom: 1px dotted var(--muted); }
.m { cursor: help; border-radius: 4px; }
.m:hover { background: var(--chip); box-shadow: 0 0 0 3px var(--chip); }
.why { display: inline-block; border-radius: 5px; padding: 2px 7px; margin: 2px; color: var(--ink-2); background: var(--chip); font-size: 11px; }
.why.fresh { color: var(--good); background: var(--good-soft); }
.navb.all .noic { background: var(--ink); position: relative; }
.navb.all .noic::after { content: ''; position: absolute; inset: 10px 9px; background: linear-gradient(var(--bg) 0 3px, transparent 3px 7px, var(--bg) 7px 10px, transparent 10px 14px, var(--bg) 14px 16px); }
.cabv { max-width: none; margin: 0; }
.cabv .side { top: 58px; max-height: calc(100vh - 58px); padding: 4px 12px 22px 0; }
.cabv .main { padding: 0 0 40px 12px; }
.cabv .tiles { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cabv .tile-value { font-size: 28px; }
.cabv table.db .gm { min-width: 150px; }
.cabv .tiles.five { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.cabv .tiles.five .tile-value { font-size: 24px; }
.cabv table.db .ghost { min-height: 28px; padding: 0 9px; }
.tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stage > h2 { margin-bottom: 14px; }
.stage > .panel { margin-top: 18px; }
.chart .band { fill: var(--s3); fill-opacity: .22; }
.chart .mark { stroke: var(--ink); stroke-width: 2; }
.chart .mark.thin { stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .soft { opacity: .25; }
.chart .session-line { stroke: var(--good); stroke-width: 2; }
.chart .session-point { fill: var(--good); }
.timeline { padding: 0; margin: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 78px 84px minmax(0, 1fr) 28px; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.timeline li:first-child { border-top: 0; }
.timeline time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline .kind { font: 500 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.timeline .k-build .kind { color: var(--cobalt); } .timeline .k-pft .kind { color: var(--warn); } .timeline .k-status .kind, .timeline .k-public .kind { color: var(--good); }
.timeline b { font-weight: 600; display: block; overflow-wrap: anywhere; } .timeline small { display: block; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.unread { color: var(--accent); font-weight: 700; }
[id^="st-"] { scroll-margin-top: 100px; }
@media (max-width: 1050px) { .tiles.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .timeline li { grid-template-columns: 64px minmax(0, 1fr) 28px; } .timeline .kind { display: none; } [id^="st-"] { scroll-margin-top: 12px; } }
@media (max-width: 700px) { .login { margin: 24px 12px; } .srcchip { order: 3; } }
/* the header: the data chip and the account button */
.srcchip { font: 500 12px/1 var(--mono); letter-spacing: 0.02em; text-decoration: none; padding: 8px 10px 8px 22px; border-radius: 999px; white-space: nowrap; position: relative; background: var(--chip); color: var(--ink-2); }
.srcchip::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--idle); }
.srcchip.on::before { background: var(--good); }
.srcchip.warn { background: var(--warn-soft); color: var(--warn); } .srcchip.warn::before { background: var(--warn); border-radius: 1px; }
.srcchip:hover { filter: brightness(1.06); }
.acct { font: 700 13px/1 var(--body); color: var(--ink-2); background: var(--chip); border: 0; border-radius: 50%; width: 34px; height: 34px; flex: 0 0 34px; cursor: pointer; }
.acct:hover { filter: brightness(1.06); }
/* settings rows, the monitoring panel, the result card */
.setrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.setrow:first-of-type { border-top: 0; }
.setrow b { font-weight: 600; display: block; } .setrow small { display: block; color: var(--muted); font-size: 12.5px; max-width: 70ch; }
.setrow select { font: inherit; font-size: 14px; padding: 8px 11px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); max-width: 100%; }
@media (max-width: 600px) { .setrow { grid-template-columns: minmax(0, 1fr); } }
.panel.watch .setrow:first-child { border-top: 0; }
.panel.watch h2 .chip { vertical-align: 2px; margin-left: 6px; }
.panel.watch .timeline li { grid-template-columns: 110px 70px minmax(0, 1fr); }
.timeline .tl-act { align-self: center; justify-self: end; }
.timeline .tl-act .ilink { margin: 0; }
#toast { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: min(380px, calc(100vw - 32px)); display: grid; gap: 4px; padding: 14px 40px 14px 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
#toast[hidden] { display: none; }
#toast b { font-size: 15px; } #toast span { font-size: 14px; } #toast small { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 4px; }
#toast a { justify-self: start; margin-top: 4px; font-weight: 600; }
#toast .x { position: absolute; top: 6px; right: 6px; }
/* export of a game page: a button on every block and its menu */
.xbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); cursor: pointer; vertical-align: middle; }
.xbtn:hover, .xbtn[aria-expanded="true"] { color: var(--ink); background: var(--line); }
.xbtn:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 1px; }
.xbtn svg { width: 16px; height: 16px; }
.xbtn:disabled { opacity: 0.45; cursor: default; background: none; }
.xbtn .spin { width: 12px; height: 12px; }
.xbtn.sm { width: 26px; height: 26px; }
.xbtn.sm svg { width: 14px; height: 14px; }
.xbtn.x { width: 32px; height: 32px; }
a.xbtn { text-decoration: none; }
.stage-head .xbtn { margin-left: auto; }
.panel > h2 .xbtn { float: right; margin: -4px -4px 0 8px; }
.panel.xrel { position: relative; }
.panel > .xbtn.xabs { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* ---- header: one row on a computer; the personal dashboard and the account are one control ---- */
.top { flex-wrap: nowrap; gap: 8px 14px; }
#nav { flex-wrap: nowrap; min-width: 0; }
#nav a { padding: 9px 8px; }
#find { flex: 0 1 210px; min-width: 110px; }
#find input { width: 100%; }
.findbtn, #tabbar, #more, .msort, .msortbox { display: none; }
.mepill { display: inline-flex; align-items: center; flex: none; padding: 3px; border-radius: 999px; background: var(--chip); }
.mepill .cab { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: none; color: var(--ink); font: 600 13px/1 var(--body); text-decoration: none; }
.mepill .cab:hover { background: var(--line); filter: none; }
.mepill .cab[aria-current] { background: var(--ink); color: var(--bg); }
.mepill .ava { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cobalt); color: var(--surface); font: 700 13px/1 var(--body); }
#tabbar .unread { min-width: 18px; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1.2 var(--mono); text-align: center; opacity: 1; }
.mepill .inbox-btn { all: unset; box-sizing: border-box; flex: none; min-width: 20px; margin: 0 0 0 4px; padding: 3px 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1.2 var(--mono); text-align: center; cursor: pointer; }
.mepill .inbox-btn:hover, .mepill .inbox-btn:focus-visible { filter: brightness(1.12); }
.mepill .inbox-btn[hidden] { display: none; }
.mepill .acct { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; background: none; color: var(--ink-2); }
.mepill .acct:hover { background: var(--line); }
.mepill .acct svg { width: 16px; height: 16px; }
.srcchip.busy::before { background: var(--cobalt); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .srcchip.busy::before { animation: none; } }
@media (max-width: 1360px) and (min-width: 701px) { .top .srcchip > span { display: none; } .top .srcchip { padding: 0; width: 26px; height: 26px; } .top .srcchip::before { left: 50%; margin-left: -3.5px; } }
@media (max-width: 1240px) and (min-width: 701px) { .mepill .lbl { display: none; } .mepill .cab { padding-right: 3px; } #find { flex-basis: 170px; } }
@media (max-width: 1060px) and (min-width: 701px) { .top { flex-wrap: wrap; } #nav { order: 9; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; } #find { margin-left: auto; } }

/* ---- sticky pieces under the header ---- */
.cabv .side { top: var(--top-h, 58px); max-height: calc(100vh - var(--top-h, 58px)); }
.stages.secbar { flex-shrink: 0; position: sticky; top: var(--top-h, 58px); z-index: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 0; margin: 0 -2px; background: var(--bg); }
.stages.secbar::-webkit-scrollbar { display: none; }
[id^="st-"] { scroll-margin-top: calc(var(--top-h, 58px) + 64px); }
/* a table that fits its panel needs no scroller of its own, so its heading row can stay under the header */
@media (min-width: 701px) {
  .tscroll.fits { overflow: visible; }
  .tscroll.fits > table > thead th { position: sticky; top: var(--top-h, 58px); z-index: 2; background: var(--surface); }
  .cabv .tscroll.fits > table > thead th { top: calc(var(--top-h, 58px) + 54px); }
}

/* ---- tables: text columns read from the left ---- */
table.db th:not(.num), table.db td:not(.num) { text-align: left; }
select:not(#language) { font: inherit; font-size: 14px; padding: 8px 11px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); max-width: 100%; }
.go.sm, .ghost.sm { min-height: 26px; padding: 0 9px; font-size: 11px; }
.nowrap { white-space: nowrap; }
.tile-value .nowrap { font-size: .86em; }
.panel.watch.compact { gap: 6px; }
.panel.watch.compact .setrow { border: 0; padding: 0; }
.more-rows { align-self: flex-start; margin-top: 8px; }
.cut { display: none !important; }

/* ---- the rail of my games: names never push it sideways; the open game is marked apart from hover ---- */
.side { overflow-x: hidden; }
.navb .st { display: block; overflow: hidden; text-overflow: ellipsis; }
.navb .st i, .navb .st .spin { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.navb:hover:not([aria-current="true"]) { background: color-mix(in srgb, var(--chip) 65%, transparent); }
.navb[aria-current="true"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1.5px var(--line); }

/* ---- smaller text no lower than 11.5px; the screenshots show that they are loading ---- */
.tag, .gm i, .hist span, .hist em { font-size: 11.5px; }
.shot-strip a { min-height: 180px; background: linear-gradient(90deg, var(--chip) 0%, var(--inset) 50%, var(--chip) 100%) 0 0 / 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .shot-strip a { animation: none; } }

/* ---- cards of the analytics stages fill both columns on a wide screen instead of leaving holes ---- */
@media (min-width: 1100px) {
  .cabv .stage > .grid { display: block; columns: 2; column-gap: 14px; }
  .cabv .stage > .grid > * { break-inside: avoid; margin-bottom: 14px; }
  .cabv .stage > .grid > .wide { column-span: all; }
}

/* ---- a phone ---- */
@media (max-width: 700px) {
  .top { flex-wrap: nowrap; gap: 8px; padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px; transition: transform .2s ease; }
  .top.away { transform: translateY(-110%); }
  #nav, .top #source-chip { display: none; }
  #find { display: none; flex: 1 1 auto; }
  .top.searching #find { display: block; }
  .top.searching .logo { display: none; }
  .findbtn { display: grid; place-items: center; margin-left: auto; width: 42px; height: 42px; flex: none; border: 0; border-radius: 12px; background: var(--chip); color: var(--ink); cursor: pointer; }
  .findbtn svg, #tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mepill .lbl { display: none; }
  .mepill .cab { padding: 3px; gap: 4px; }
  .mepill .ava { width: 36px; height: 36px; }
  .mepill .acct { width: 34px; height: 36px; }
  input, select, textarea, #find input, select:not(#language) { font-size: 16px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .top.away ~ #main .stages.secbar { top: 0; }
  #tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 4px 4px env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); }
  #tabbar a, #tabbar button { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border-radius: 12px; color: var(--muted); font: 500 11.5px/1.1 var(--body); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #tabbar [aria-current] { color: var(--ink); }
  #tabbar [aria-current] svg { color: var(--accent); }
  #tabbar .unread { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; padding: 1px 5px; font-size: 10.5px; }
  #more:not([hidden]) { display: grid; position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 7; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 36px rgba(0, 0, 0, .32); }
  #more a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
  #more a[aria-current] { background: var(--chip); }
  #more p { padding: 8px 6px 2px; }
  #more .srcchip { display: inline-flex; padding: 8px 12px 8px 24px; min-height: 0; }
  .toast, #toast { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* tiles two by two */
  .tiles, .cabv .tiles, .tiles.five, .cabv .tiles.five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 10px 12px; gap: 5px; border-radius: 14px; }
  .tile-label { font-size: 12.5px; }
  .tile-value, .cabv .tile-value, .cabv .tiles.five .tile-value { font-size: 19px; }
  .tile-sub { font-size: 11.5px; line-height: 1.35; }

  /* touch targets */
  .star { width: 40px; height: 40px; font-size: 20px; }
  .ghost, .go { min-height: 40px; }
  .chipl { padding: 7px 12px; font-size: 13px; }
  .xbtn { width: 40px; height: 40px; }
  .gm { min-height: 44px; }

  /* the rail of my games: no scrollbar, a fade shows there is more */
  .cabv .nav { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .cabv .nav::-webkit-scrollbar { display: none; }
  .navb { min-height: 46px; }

  /* the head of a game: shorter, so that the numbers come sooner */
  .cabv.app .main { padding: 6px 0 40px; }
  .cabv .side { padding: 0 0 4px; }
  .cabv .side-foot { display: none; }
  .cabv .side .eyebrow { display: none; }
  .hero .pitch { font-size: 14.5px; }
  .hero .tagrow { gap: 4px; }
  .hero .tagrow .tag { font-size: 11px; padding: 3px 6px; }
  .hero .acts { gap: 8px 12px; }
  .hero .open { padding: 12px 16px; font-size: 13px; }

  /* filters two to a row */
  .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  .filters .f.grow { grid-column: 1 / -1; }
  .filters .f select, .filters .f input { width: 100%; }

  /* the niche map does not fit a phone; the table below says the same */
  .panel.nichemap { display: none; }

  /* a table row becomes a card: the main column on top, three values below, the rest after a tap */
  .msortbox { display: flex; align-items: center; gap: 8px; }
  .msort { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
  .msort select { flex: 1; min-width: 0; }
  .mdir { flex: none; min-height: 44px; }
  .tscroll:has(> table.cards) { overflow: visible; }
  table.cards thead { display: none; }
  table.cards, table.cards tbody { display: block; width: 100%; }
  table.cards tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; position: relative; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.cards tbody tr:last-child { border-bottom: 0; }
  table.cards tbody tr:hover { background: none; }
  table.cards td { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 0 !important; border: 0; text-align: left !important; white-space: normal; font-size: 14px; }
  table.cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 11.5px; line-height: 1.2; }
  table.cards td.c-main { grid-column: 1 / -1; order: -1; padding-right: 48px !important; }
  table.cards td.c-main::before, table.cards td.c-star::before { display: none; }
  table.cards td.c-rank, table.cards td.c-more { display: none; }
  table.cards tr.is-open td.c-more { display: flex; }
  table.cards td.c-star { position: absolute; top: 4px; right: 0; }
  table.cards tr.has-more { padding-bottom: 26px; cursor: pointer; }
  table.cards tr.has-more::after { content: '▾'; position: absolute; left: 50%; bottom: 4px; color: var(--muted); font-size: 13px; }
  table.cards tr.is-open::after { content: '▴'; }
  table.cards .gm { max-width: none; min-width: 0; }
  table.cards .bar { margin: 4px 0 0; }
  table.cards td.msg { min-width: 0; }
}

/* ---- the account menu: a card under the account control; a sheet from the bottom on a phone ---- */
.account-dialog { position: fixed; inset: calc(var(--top-h, 58px) + 6px) max(16px, calc((100vw - 1568px) / 2)) auto auto; margin: 0; width: min(340px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.account-dialog::backdrop { background: rgba(10, 13, 20, .35); }
.account-dialog header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 12px; align-items: center; padding: 16px 12px 12px 16px; }
.account-dialog header b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dialog header small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dialog .ava { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cobalt); color: var(--surface); font: 700 18px/1 var(--body); }
.account-dialog .xbtn svg { width: 16px; height: 16px; }
.account-dialog svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.account-dialog .acct-note { margin: 0; padding: 0 16px 12px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.account-dialog .acct-note .id { display: block; font: 500 11px/1.6 var(--mono); opacity: .8; overflow-wrap: anywhere; }
.account-dialog .menu { display: grid; padding: 6px; border-top: 1px solid var(--line); }
.account-dialog .menu a, .account-dialog .menu-btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font: 500 14.5px/1.2 var(--body); cursor: pointer; }
.account-dialog .menu a svg, .account-dialog .menu-btn svg { color: var(--muted); }
.account-dialog .menu a:hover, .account-dialog .menu a:focus-visible, .account-dialog .menu-btn:hover, .account-dialog .menu-btn:focus-visible { background: var(--chip); }
.account-dialog .acct-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 8px; border-top: 1px solid var(--line); }
.account-dialog .menu-btn { flex: 1; }
.account-dialog .danger { all: unset; box-sizing: border-box; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--crit); font: 500 13px/1 var(--body); cursor: pointer; white-space: nowrap; }
.account-dialog .danger:hover, .account-dialog .danger:focus-visible { background: var(--crit-soft); }
@media (max-width: 700px) {
  .account-dialog { inset: auto 0 0 0; width: 100%; max-width: none; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .account-dialog .menu a, .account-dialog .menu-btn { min-height: 50px; }
}

/* ---- the notifications: the list under the count of the account control; a sheet from the bottom on a phone ---- */
.inbox-dialog { position: fixed; inset: calc(var(--top-h, 58px) + 6px) max(16px, calc((100vw - 1568px) / 2)) auto auto; margin: 0; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - var(--top-h, 58px) - 24px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 48px rgba(0, 0, 0, .35); }
.inbox-dialog[open] { display: flex; flex-direction: column; }
.inbox-dialog::backdrop { background: rgba(10, 13, 20, .35); }
.inbox-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.inbox-dialog header b { font-size: 15px; }
.inbox-dialog .xbtn svg { width: 16px; height: 16px; }
.inbox-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.inbox-list a { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 10px 10px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.inbox-list a:hover, .inbox-list a:focus-visible { background: var(--chip); }
.inbox-list .dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; }
.inbox-list .is-new .dot { background: var(--accent); }
.inbox-list div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inbox-list b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-list small { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.inbox-list time { padding-top: 1px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.inbox-empty { margin: 0; padding: 18px 16px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.inbox-dialog footer { display: flex; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  .inbox-dialog { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 80vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .inbox-list a { grid-template-columns: 8px minmax(0, 1fr); gap: 2px 10px; }
  .inbox-list time { grid-column: 2; grid-row: 2; padding: 0; }
}

/* ---- blocks fold to their heading ---- */
.fold { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -3px 6px -3px -6px; border-radius: 7px; color: var(--muted); cursor: pointer; vertical-align: middle; }
.fold:hover, .fold:focus-visible { background: var(--chip); color: var(--ink); }
.fold svg { width: 16px; height: 16px; transition: transform .15s ease; }
.folded .fold svg { transform: rotate(-90deg); }
.panel.folded > :not(h2) { display: none !important; }
.panel.folded { gap: 0; }
.stage.folded > :not(.stage-head) { display: none !important; }
@media (max-width: 700px) { .fold { width: 36px; height: 36px; margin: -8px 4px -8px -10px; } }

/* ---- player recordings, a group per build ---- */
details.recs { border-top: 1px solid var(--line); }
details.recs summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 0; color: var(--ink); font-size: 14px; list-style: none; }
details.recs summary::-webkit-details-marker { display: none; }
details.recs summary::before { content: '▸'; color: var(--muted); width: 12px; }
details.recs[open] summary::before { content: '▾'; }
details.recs summary b { font: 500 13px/1.4 var(--mono); overflow-wrap: anywhere; }
details.recs summary span { color: var(--muted); font-size: 13px; }
table.txt th.num { text-align: right; }

/* ---- a game cell: hovering the studio underlines only the studio, not the game's name ---- */
div.gm:hover b { text-decoration: none; }
div.gm a.gm-title:hover b { text-decoration: underline; }

/* ---- a page of a long list ---- */
.lpager { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 10px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.lpager .ghost { min-width: 40px; justify-content: center; font-size: 16px; text-decoration: none; }
.lpager span.ghost { opacity: 0.4; cursor: default; }

/* ---- the archive of own games ---- */
/* the groups of the rail of My games (public/shared/rail.js): a heading entry with the arrow that folds the group */
.navg { position: relative; display: flex; align-items: center; }
.navg > .navb { flex: 1 1 auto; min-width: 0; padding-right: 38px; }
.nav > .navg:not(:first-child) { margin-top: 10px; }
.navfold { all: unset; box-sizing: border-box; position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.navfold:hover, .navfold:focus-visible { background: var(--chip); color: var(--ink); }
.navfold svg { width: 16px; height: 16px; transition: transform .15s ease; }
.navg.folded .navfold svg { transform: rotate(-90deg); }
.navb.navb-shared .noic { display: grid; place-items: center; color: var(--muted); }
.navb.navb-shared .noic svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .navg { flex: none; }
  .nav > .navg:not(:first-child) { margin: 0 0 0 10px; }
  .navg > .navb { padding-right: 34px; }
  .navfold { right: 4px; }
}
.navb.navb-shelf .noic { background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Cpath d='M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8M10 12h4'/%3E%3C/svg%3E") center / 20px no-repeat; }
.navb.archived { opacity: .7; }
.shelf-list { list-style: none; margin: 0; padding: 0; display: grid; }
.shelf-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.shelf-list li:first-child { border-top: 0; }
.shelf-list a { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-list a:hover { text-decoration: underline; }
.shelf-list small { margin-right: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---- headings that sort in the browser ---- */
th.csort { cursor: pointer; user-select: none; }
th.csort:hover, th.csort.sorted { color: var(--ink); }
th.csort::after { content: attr(data-dir); margin-left: 4px; }

/* ---- a long description: two lines and More ---- */
.clampbox { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 72ch; }
.clampbox .clamp { max-width: none; }
.clampbox .linkbtn { align-self: flex-start; }
.clamp { box-sizing: border-box; width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clampbox.is-open .clamp { -webkit-line-clamp: unset; overflow: visible; }
.linkbtn { all: unset; cursor: pointer; color: var(--cobalt); font-size: 13.5px; font-weight: 500; padding: 4px 0; }
.linkbtn:hover, .linkbtn:focus-visible { text-decoration: underline; }

/* ---- access: invites and accounts (admins) ---- */
.invite-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.invite-form .f.grow { flex: 1 1 260px; }
.invite-form input { width: 100%; }
.invite-link { display: grid; gap: 8px; margin-top: 4px; padding: 14px; border-radius: 12px; background: var(--good-soft); }
.invite-row { display: flex; gap: 8px; }
.invite-row input { flex: 1; min-width: 0; font: 500 13px/1.4 var(--mono); }
.sub-line { display: block; color: var(--muted); font-size: 12px; }
.ghost.warnbtn { color: var(--crit); }
.login-invite { padding: 10px 14px; border-radius: 10px; background: var(--good-soft); color: var(--good); font-weight: 600; }
.acc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 4px 0 14px; }
@media (max-width: 700px) { table.acc .chip { white-space: normal; text-align: left; } }

/* success wall: the publication block on a My games page, the wall table and the versions of a shared game */
.share-panel { padding-top: 12px; padding-bottom: 12px; }
.share-panel summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.share-panel details[open] summary { margin-bottom: 10px; }
.share-widgets { border: 0; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.share-widgets legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.share-widgets label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
table.wall tr.muted { opacity: .6; }
.share-versions li.on time { font-weight: 600; }
.share-note .acts { margin-top: 8px; }
.share-versions li { grid-template-columns: 150px 130px minmax(0, 1fr); } .share-versions .kind { text-transform: none; letter-spacing: 0; }
@media (max-width: 700px) { .share-versions li { grid-template-columns: minmax(0, 1fr); } }
/* the tabs above a game page: My games, catalog card, shared copy */
.game-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.game-tabs a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.game-tabs a[aria-current="page"] { background: var(--ink, #111); border-color: transparent; color: var(--surface); font-weight: 600; }

/* the page of one Player Fit Test: the test picker, its icon links and the page export in one row */
.tp-head h1 { font: 800 22px/1.2 var(--display); }
.tp-pick { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.tp-pick label { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 0; }
.tp-pick select:not(#language) { flex: 1; min-width: 0; max-width: none; text-overflow: ellipsis; }

/* comparison of two Player Fit Tests: A is the baseline, B the compared test */
.cmp-head h1 { font: 800 22px/1.2 var(--display); }
/* A | swap | B in one row: each picker takes half of the room and a long build name is cut, the whole name is in the tip */
.cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px 14px; align-items: center; }
.cmp-pick label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-pick select:not(#language) { flex: 1; min-width: 0; max-width: none; text-overflow: ellipsis; }
.cmp-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; font: 600 11.5px/1 var(--mono); color: #fff; }
.cmp-tag.a { background: var(--s1); } .cmp-tag.b { background: var(--s2); }
.sw.cmp-a { background: var(--s1); } .sw.cmp-b { background: var(--s2); }
table.cmp th { white-space: nowrap; }
table.cmp td small { color: var(--muted); }
.cmp-d.v-better { color: var(--good); } .cmp-d.v-worse { color: var(--crit); }
.cmp-hist { display: flex; align-items: stretch; gap: 6px; height: 140px; padding-top: 8px; }
.cmp-hist > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-hist .bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
.cmp-hist i { flex: 1; min-height: 2px; border-radius: 3px 3px 0 0; }
.cmp-hist i.a { background: var(--s1); } .cmp-hist i.b { background: var(--s2); }
.cmp-hist .lbl { text-align: center; font: 500 11px/1 var(--mono); color: var(--muted); }
.cmp-err { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cmp-err li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; min-width: 0; }
.cmp-err small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-notes ul { margin: 0; padding-left: 18px; color: var(--warn); font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
/* colour code: green better, red worse, cobalt a clear change where neither direction is better, grey within noise */
.cmp-d.v-changed { color: var(--cobalt); } .cmp-d.v-noise, .cmp-d.v-unknown, .cmp-d.v-same { color: var(--muted); }
table.cmp td.cmp-d { font-weight: 600; }
.vmark { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font: 700 10.5px/1 var(--body); cursor: default; vertical-align: middle; }
.vmark.better { background: var(--good-soft); color: var(--good); } .vmark.worse { background: var(--crit-soft); color: var(--crit); }
.vmark.changed { background: color-mix(in srgb, var(--cobalt) 14%, transparent); color: var(--cobalt); }
.vmark.noise { background: var(--inset); color: var(--muted); font-size: 13px; } .vmark.unknown { border: 1.5px dashed var(--axis); color: var(--muted); }
.vmark.none, .vmark.same { color: var(--muted); font-size: 14px; }
td.vcell { width: 1%; text-align: center; }
.cmp-legend { flex-wrap: wrap; gap: 6px 14px; } .cmp-legend .vmark { width: 17px; height: 17px; font-size: 9.5px; margin-right: 2px; }
.mv { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 52px; }
.mv i { display: block; height: 4px; border-radius: 2px; min-width: 1px; align-self: flex-start; }
.mv i.a { background: var(--s1); } .mv i.b { background: var(--s2); }
.dv { position: relative; display: block; height: 4px; margin-top: 4px; min-width: 64px; background: linear-gradient(var(--axis), var(--axis)) center / 1px 8px no-repeat; }
.dv i { position: absolute; top: 0; height: 4px; border-radius: 2px; background: var(--axis); }
.dv i.pos { left: 50%; } .dv i.neg { right: 50%; }
.dv.better i { background: var(--good); } .dv.worse i { background: var(--crit); } .dv.changed i { background: var(--cobalt); }
.cmp-tag.sm { min-width: 0; height: 16px; padding: 0 4px; font-size: 10px; vertical-align: 1px; cursor: default; }
@media (max-width: 640px) {
  .cmp-pick { grid-template-columns: minmax(0, 1fr); } .cmp-pick > button { justify-self: start; }
  .cmp-hist { gap: 3px; } .cmp-hist i { flex-basis: 0; }
}

/* ---- game header (shared/gamehead.js): identity and actions, pitch, facts, links and data state ---- */
/* the name on the left; the main actions and the icon buttons (star, sharing, export) in one row on the right */
.ghero { gap: 14px; padding: 18px 20px; }
.gh-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "icon title tools" "icon line tools"; gap: 6px 16px; align-items: center; }
.gh-noicon .gh-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tools" "line tools"; }
.gh-icon { grid-area: icon; width: 64px; height: 64px; border-radius: 16px; object-fit: cover; background: var(--chip); }
.gh-head > .title { grid-area: title; min-width: 0; align-self: end; gap: 2px 12px; }
.gh-head > .title h1 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; overflow-wrap: anywhere; }
.gh-head .en { font-size: 14px; }
.gh-head .en .dev-link { color: inherit; text-decoration: none; }
.gh-head .en .dev-link:hover { color: var(--ink); text-decoration: underline; }
.gh-line { grid-area: line; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.gh-line .pill { flex: none; padding: 5px 9px; font-size: 11px; }
.gh-line .build { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 3px 8px; font-size: 12.5px; }
.gh-tools { grid-area: tools; align-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; }
.gh-cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gh-cta .go, .gh-cta .ghost { min-height: 34px; }
.gh-corner { display: flex; align-items: center; gap: 2px; }
.gh-corner:empty { display: none; }
.gh-cta + .gh-corner:not(:empty) { padding-left: 6px; border-left: 1px solid var(--line); }
.gh-tools .xbtn { width: 34px; height: 34px; }
.gh-tools .star { width: 34px; height: 34px; font-size: 20px; }
.gh-open svg { width: 16px; height: 16px; flex: none; }
.gh-tags { display: contents; }
.gh-tags:not(.is-open) .gh-rest { display: none; }
.gh-rest { display: contents; }
.gh-line .chipl { padding: 4px 9px; font-size: 12.5px; }
.gh-more { all: unset; cursor: pointer; font: 500 12px/1 var(--mono); padding: 6px 9px; border-radius: 999px; background: var(--chip); color: var(--cobalt); }
.gh-tags.is-open .gh-more { display: none; }
.gh-desc .pitch { font-size: 15px; }
.gh-facts { display: flex; flex-wrap: wrap; margin: 0; border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; }
.gh-facts > div { padding: 9px 16px; border-left: 1px solid var(--line); min-width: 0; }
.gh-facts > div:first-child { border-left: 0; }
.gh-facts dt { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gh-facts dd { margin: 3px 0 0; font: 600 14px/1.3 var(--body); }
.gh-facts dd small { font-weight: 400; font-size: 12px; color: var(--muted); }
.gh-facts .ok { color: var(--good); } .gh-facts .off { color: var(--muted); }
.gh-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.gh-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.gh-lbl { font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.gh-links a { display: inline-block; font-size: 13px; line-height: 1; padding: 7px 10px; border-radius: 8px; background: var(--chip); color: var(--ink); text-decoration: none; white-space: nowrap; }
.gh-links a::first-letter { text-transform: uppercase; }
.gh-links a.ext::after { content: " ↗"; color: var(--muted); }
.gh-links a:hover { color: var(--cobalt); }
/* the data state and its icon buttons (refresh, archive) at the end of the footer */
.gh-sync { display: flex; align-items: center; gap: 4px 8px; margin-left: auto; min-width: 0; }
.gh-acts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.gh-acts .refresh-line { margin: 0 4px 0 0; }
.gh-note { color: var(--muted); font-size: 13px; }
.ghero > .cap { margin-top: -4px; }
.gm.gm-wide { max-width: 640px; }
@media (max-width: 700px) {
  .ghero { padding: 14px; gap: 12px; }
  .gh-head { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "icon title" "icon line" "tools tools"; gap: 4px 12px; }
  .gh-noicon .gh-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tools" "line line"; }
  .gh-icon { width: 52px; height: 52px; border-radius: 13px; align-self: start; }
  .gh-line .build { white-space: normal; overflow-wrap: anywhere; }
  .gh-line .build span { white-space: nowrap; }
  /* the main action on the left, the icon buttons on the right of one row */
  .gh-tools { margin-top: 6px; }
  .gh-noicon .gh-tools { margin-top: 0; }
  .gh-corner { margin-left: auto; }
  .gh-cta + .gh-corner:not(:empty) { border-left: 0; padding-left: 0; }
  .gh-cta .go, .gh-cta .ghost { min-height: 40px; }
  .gh-tools .xbtn, .gh-tools .star { width: 40px; height: 40px; }
  .gh-desc .pitch { font-size: 14.5px; }
  /* facts and links scroll sideways in one row instead of growing the header */
  .ghero .gh-facts, .gh-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: auto; }
  .ghero .gh-facts::-webkit-scrollbar, .gh-links::-webkit-scrollbar { display: none; }
  .ghero .gh-facts > div { flex: none; padding: 8px 12px; }
  .gh-links { width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }
  .gh-lbl { flex: none; }
  .gh-sync { margin-left: 0; width: 100%; justify-content: space-between; }
  .gh-sync .rstatus { flex: 1; min-width: 0; font-size: 12.5px; }
}
/* the "i" next to a block heading: its explanation on hover or tap (see hintIcons in enhance.js) */
.info { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; vertical-align: middle; border-radius: 50%; color: var(--muted); cursor: help; }
.info svg { width: 15px; height: 15px; }
.info:hover, .info:focus-visible { color: var(--ink); background: var(--chip); }
#tip { width: max-content; max-width: min(340px, calc(100vw - 16px)); }
/* the page of every in-game event (analytics/events.js) and the event filters of the comparison */
.ev-head .filters, .cmp-filters { margin-top: 4px; }
.ev-table .mv i { background: var(--cobalt); }
.ev-table td:first-child code { white-space: nowrap; }
.cmp-filters { margin-bottom: 8px; }
.ev-ftoggle { display: none; align-self: flex-start; }
@media (max-width: 700px) {
  .ev-ftoggle { display: inline-flex; }
  .ev-ftoggle[aria-expanded="false"] + .filters { display: none; }
}
.ev-said { color: var(--ink); margin-bottom: -6px; }
/* small icon links next to versions and tests (shared/links.js) */
/* .ilink: a small icon button (.xbtn.sm) placed in a table cell or beside a field */
.ilink { margin-left: 4px; }
.f:has(> .ilink) { position: relative; padding-right: 30px; }
.f > .ilink { position: absolute; right: 0; bottom: 6px; }
/* a long build name in a table cell: one line, cut, the whole name in the tip */
td.bcell { white-space: nowrap; }
td.bcell > span { display: inline-block; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* a player recording over the page (openVideo in enhance.js) */
td.acts-cell { white-space: nowrap; text-align: right; }
.vmodal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / 0.72); }
.vbox { display: flex; flex-direction: column; gap: 10px; width: min(960px, 100%); max-height: 100%; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vbar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.vbox video { width: 100%; max-height: calc(100vh - 120px); border-radius: 8px; background: #000; }
/* the state of a test as an icon (statusIcon in shared/links.js) */
.sticon { display: inline-flex; vertical-align: middle; }
.sticon svg { width: 16px; height: 16px; }
.sticon.done { color: var(--good); } .sticon.run { color: var(--warn); }
th.stcell, td.stcell { text-align: center; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ilink-gap { display: inline-block; width: 30px; vertical-align: middle; }

/* the collection settings of the admins: label and hint, the input with its unit, the default or the override */
.coll-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, auto) minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.coll-row:first-of-type { border-top: 0; }
.coll-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coll-label { font-weight: 600; }
.coll-hint, .coll-range, .coll-note { color: var(--muted); font-size: 12.5px; }
.coll-input { display: flex; align-items: center; gap: 8px; }
.coll-input input[type="number"] { width: 110px; }
.coll-input input[type="checkbox"] { width: 18px; height: 18px; }
.coll-note code { font-size: 12px; }
.coll-save { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 10px 0; background: linear-gradient(to bottom, transparent, var(--bg, #eef1f6) 35%); }
@media (max-width: 760px) { .coll-row { grid-template-columns: minmax(0, 1fr); } }
/* the refresh buttons of a catalog game and of a studio, and the outcome line beside them */
.refresh-btn svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.refresh-line { font-size: 12.5px; margin-left: 8px; }
.refresh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }

/* series colours for the legends of the newer charts (series.js) */
.sw.sx1 { background: var(--s1); } .sw.sx2 { background: var(--s2); } .sw.sx3 { background: var(--s3); }
.sw.sx4 { background: var(--s4); } .sw.sx5 { background: var(--s5); } .sw.sx6 { background: var(--s6); }

/* a game page as tabs by stage: every pane is on the page, the chosen one is shown (cabinet.js) */
.tabbed > [data-tab] { display: none; }
.tabbed[data-active="now"] > [data-tab="now"], .tabbed[data-active="live"] > [data-tab="live"], .tabbed[data-active="pft"] > [data-tab="pft"],
.tabbed[data-active="playtest"] > [data-tab="playtest"], .tabbed[data-active="money"] > [data-tab="money"], .tabbed[data-active="quality"] > [data-tab="quality"],
.tabbed[data-active="versions"] > [data-tab="versions"], .tabbed[data-active="market"] > [data-tab="market"] { display: block; }
/* the tabs of a game page: words with their short note, the open one underlined; the bar scrolls sideways on a narrow screen */
.stages.secbar.tabbar { gap: 0; padding: 0; margin: 0; align-items: center; border-bottom: 1px solid var(--line); }
.tabl { flex: none; display: inline-flex; align-items: baseline; gap: 5px; padding: 11px 7px 9px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font: 600 13.5px/1.2 var(--body); text-decoration: none; white-space: nowrap; }
.tabl span { font: 400 12px/1.2 var(--body); color: var(--muted); }
/* under the tabs a stage needs no rule of its own above it */
.tabbed .stage { border-top: 0; margin-top: 0; padding-top: 6px; }
.tabl:hover { color: var(--ink); }
.tabl[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.tabl:focus-visible { outline-offset: -3px; }
@media (min-width: 1100px) { .stages.secbar.tabbar { flex-wrap: wrap; overflow-x: visible; } }
@media (max-width: 700px) { .tabl { padding: 12px 10px 10px; font-size: 13.5px; } }
/* a stage that opens with tiles keeps the same gap between the tiles and its panels as between panels */
.stage > .tiles { margin-bottom: 12px; }
/* players now: a dot that is green while somebody plays */
.online { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--mono, monospace); color: var(--muted); margin-right: 8px; white-space: nowrap; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: var(--idle, #9aa4b8); }
.online.on { color: var(--good); }
.online.on i { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft, rgba(27,175,122,.18)); animation: online-pulse 2s ease-in-out infinite; }
@keyframes online-pulse { 50% { box-shadow: 0 0 0 1px var(--good-soft, rgba(27,175,122,.18)); } }
@media (prefers-reduced-motion: reduce) { .online.on i { animation: none; } }

/* period buttons of the live tab */
.seg { display: inline-flex; gap: 4px; margin-left: auto; }
.stage-head .seg ~ .xbtn { margin-left: 0; }
.seg .ghost { min-height: 26px; padding: 0 10px; font-size: 12px; }
.seg .ghost.on { background: var(--ink); color: var(--surface); }
.sw.dashed { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); color: var(--s2); }
.quota { margin-top: 10px; }

/* in the rail the players are a small pill next to the status, without a second dot */
.navb .st .online { padding: 1px 6px; border-radius: 6px; background: var(--chip); color: var(--muted); }
.navb .st .online.on { background: var(--good-soft); color: var(--good); }
.navb .st .online i { display: none; }

/* the chooser of the parts to share on the success wall: the parts grouped by the tab they come from, two compact
   columns a group, one switch per group; the buttons stay at the bottom while the groups scroll */
.share-chooser { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); overflow: hidden; }
.share-chooser::backdrop { background: rgba(10, 13, 20, .4); }
.share-chooser form { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.share-chooser header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.share-chooser header h2 { margin: 0; font-size: 18px; }
.share-chooser .lede { padding: 6px 18px 0; margin: 0; }
.share-groups { overflow-y: auto; padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.share-group { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.share-group legend { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: var(--inset); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; float: left; }
.share-group legend label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.share-count { font: 600 12px/1 var(--mono, monospace); color: var(--muted); }
.share-items { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.share-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 14px; cursor: pointer; border-top: 1px solid var(--line); min-width: 0; }
.share-item:nth-child(-n + 2) { border-top: 0; }
.share-item:nth-child(odd) { border-right: 1px solid var(--line); }
.share-item:only-child { grid-column: 1 / -1; border-right: 0; }
.share-item span { min-width: 0; }
.share-item input, .share-group legend input { width: 16px; height: 16px; flex: none; accent-color: var(--s1); }
.share-item em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; margin-left: 4px; white-space: nowrap; }
.tag-sens { background: var(--warn-soft); color: var(--warn); }
.tag-fold { background: var(--chip); color: var(--muted); }
.share-item em.tag-link { display: inline-flex; vertical-align: middle; padding: 1px 3px; color: var(--muted); }
.tag-link svg { width: 14px; height: 14px; }
.share-chooser footer { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.share-chooser footer .switch-tools { display: flex; gap: 12px; margin-right: auto; }
.share-total { color: var(--muted); font-size: 13px; }
@media (max-width: 560px) { .share-items { grid-template-columns: minmax(0, 1fr); } .share-item:nth-child(odd) { border-right: 0; } .share-item:nth-child(2) { border-top: 1px solid var(--line); } .share-chooser footer { flex-wrap: wrap; } }
/* the notes of a version page, under its heading */
.cmp-notes-list { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
.ver-open { margin: 4px 0 12px; }
.ver-open select { min-width: 280px; }

/* the export chooser (export.js): the switches of the share chooser, then the format and the actions of that format */
.tabbar .xtab { margin-left: auto; position: sticky; right: 0; align-self: center; background: var(--bg); box-shadow: -10px 0 10px var(--bg); }
.tabbed.x-every > [data-tab] { display: block; }
.x-chooser.single { width: min(560px, calc(100vw - 32px)); }
.x-out { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.x-chooser.single .x-out { border-top: 0; }
.x-lbl { font: 600 12px/1 var(--mono, monospace); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.x-formats { display: flex; flex-wrap: wrap; gap: 4px; }
.x-formats .ghost { min-height: 28px; padding: 0 10px; font-size: 13px; }
.x-formats .ghost.on { background: var(--ink); color: var(--surface); }
.x-formats .ghost:disabled { opacity: .45; cursor: default; }
.x-hint { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.x-chooser footer { flex-wrap: wrap; }
.x-chooser footer .switch-tools { margin-right: 4px; }
.x-status { margin-left: auto; color: var(--muted); font-size: 13px; text-align: right; }
.x-acts { display: flex; gap: 8px; }
.x-acts button { display: inline-flex; align-items: center; gap: 6px; }
.x-acts button svg { width: 16px; height: 16px; }
.x-acts button.busy { opacity: .7; }
@media (max-width: 560px) { .x-out { grid-template-columns: minmax(0, 1fr); } .x-hint { grid-column: 1; } .x-acts { width: 100%; } .x-acts button { flex: 1; justify-content: center; } }

/* the step switch of a chart (10 minutes, hour, day, week), on its own line above the legend */
.steps { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 8px; }
.steps .seg { margin-left: 0; flex-wrap: wrap; }
.steps-lbl { font: 600 11px/1 var(--mono, monospace); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.steps .ghost:disabled { opacity: .4; cursor: default; }

/* games shared with one account (public/grants/grants.js): the rail heading, the owner's block, the chooser and the link */
/* the notes about the accesses of this account, on the list of shared games: the unread ones stand out */
.grant-notes { list-style: none; margin: 8px 0 0; padding: 0; }
.grant-notes li { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: baseline; gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--line); }
.grant-notes li:first-child { border-top: 0; }
.grant-notes div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grant-notes small { color: var(--ink-2); font-size: 13px; }
.grant-notes time { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.grant-notes a { justify-self: end; }
.grant-notes li.is-new b::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
@media (max-width: 700px) { .grant-notes li { grid-template-columns: minmax(0, 1fr) auto; } .grant-notes time { grid-column: 1; grid-row: 2; } .grant-notes a, .grant-notes li > span { grid-column: 2; grid-row: 1 / span 2; align-self: center; } }
/* the shared games on the page of all own games, under All my games: on a phone the rail hides them at its far end */
.shared-panel h2 a { color: inherit; text-decoration: none; }
.shared-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin-top: 8px; }
.shared-list .navb { width: 100%; }
.grant-dialog .acts { margin: 8px 0 10px; }
.grant-table td { vertical-align: middle; }
.grant-table .grant-note { display: block; color: var(--muted); font-size: 12.5px; }
.grant-table .acts-cell { white-space: nowrap; text-align: right; }
.grant-table .acts-cell .ghost { min-height: 28px; padding: 0 10px; font-size: 13px; }
.grant-table .acts-cell .ghost + .ghost { margin-left: 6px; }
.grant-fields { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 18px 0; }
.grant-fields .f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.grant-fields input, .grant-fields select { width: 100%; min-width: 0; }
.grant-link { width: min(560px, calc(100vw - 32px)); }
.grant-url { display: flex; gap: 8px; padding: 14px 18px; }
.grant-url input { flex: 1; min-width: 0; font: 13px/1.4 var(--mono, monospace); }
.grant-link footer .share-total { margin-right: auto; }
@media (max-width: 560px) { .grant-fields { grid-template-columns: minmax(0, 1fr); } .grant-table .acts-cell { white-space: normal; } }
/* "Collect now" (catalog/collect.js): one choice of what to collect */
.collect-dialog { width: min(560px, calc(100vw - 32px)); }
.collect-scopes { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; }
.collect-scope { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer; }
.collect-scope + .collect-scope { border-top: 1px solid var(--line); }
.collect-scope input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--s1); }
.collect-scope span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.collect-scope small { color: var(--muted); font-size: 13px; }
.collect-scope:has(input:checked) { background: var(--inset); }
.collect-dialog footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0 0; border-top: 0; }
/* a block shown over the page (panel-dialog.js): the success wall and the accesses of a game */
.panel-dialog { width: min(760px, calc(100vw - 32px)); }
.panel-dialog .pd-body { overflow-y: auto; max-height: calc(100vh - 120px); padding: 8px 18px 18px; }
.panel-dialog .pd-body > .lede, .panel-dialog .pd-body > .cap { padding: 0; margin: 6px 0; }
.xbtn.on { color: var(--accent); }
.xbtn .xn { position: absolute; top: -4px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--accent); color: var(--surface); font: 600 10px/15px var(--mono, monospace); text-align: center; }
.xbtn { position: relative; }
.grant-link .share-total[data-kind="ok"] { color: var(--good); }
.grant-link .share-total[data-kind="error"] { color: var(--crit, var(--warn)); }

/* ---- the strip of numbers over the summary table of My games ---- */
.ov-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ov-head .gh-facts dd .online { margin: 0; font-size: 14px; }
.ov-head .gh-facts dd .online.on i { width: 8px; height: 8px; }
.panel.gh-noicon .gh-head > .title h1 { font-size: clamp(24px, 3vw, 30px); }
@media (max-width: 700px) {
  .ov-head .gh-facts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ov-head .gh-facts > div { border-left: 0; border-top: 1px solid var(--line); padding: 8px 12px; }
  .ov-head .gh-facts > div:nth-child(-n+2) { border-top: 0; }
  .ov-head .gh-facts > div:nth-child(2n) { border-left: 1px solid var(--line); }
  .ov-head > .ghost { width: 100%; }
  /* a heading row of a stage stays one line: the chip gives way, the export button stays at the end */
  .stage-head { flex-wrap: nowrap; gap: 8px; }
  .stage-head h2 { font-size: 19px; white-space: nowrap; }
  .stage-head > .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* a period switch (the Now tab) takes a row of its own under the heading; on one line it pushed the export button
     off the screen and the page scrolled sideways */
  .stage-head:has(> .seg) { flex-wrap: wrap; }
  .stage-head > .seg { order: 1; flex: 1 0 100%; margin-left: 0; }
  .stage-head > .seg .ghost { flex: 1; }
  .stage-head .seg ~ .xbtn { margin-left: auto; }
  .panel.watch.compact .setrow > .go { justify-self: start; }
}
.kpi .v { white-space: normal; }
.kpi .v .thr { display: inline-block; white-space: nowrap; }
.cabv.app { grid-template-columns: 236px minmax(0, 1fr); }
@media (max-width: 860px) { .cabv.app { grid-template-columns: minmax(0, 1fr); } }
/* a number next to a heading (games, studios, events, versions): one badge, not a status chip */
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--chip); color: var(--muted); font: 600 11.5px/1 var(--mono); vertical-align: 3px; }
/* the favorite mark of a game in the rail of My games: at the right of its entry, like the star everywhere */
.navb:has(> .fav) { grid-template-columns: 36px minmax(0, 1fr) auto; }
.navb > .fav { font-style: normal; color: var(--warn); font-size: 13px; line-height: 1; }
@media (max-width: 860px) { .navb:has(> .fav) { grid-template-columns: 30px auto auto; } }
/* the state of a game in a list or a table: the dot and the word of the rail (a header has the bordered .pill) */
.st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; }
.st > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.navb .st { font-size: 12px; }