@font-face { font-family: "Barlow Condensed"; src: url("/g/skin/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }
@font-face { font-family: "Barlow Condensed"; src: url("/g/skin/BarlowCondensed-Black.ttf") format("truetype"); font-weight: 800 900; font-display: block; }
@font-face { font-family: "Yanone Kaffeesatz"; src: url("/g/skin/YanoneKaffeesatz.ttf") format("truetype"); font-weight: 200 700; font-display: block; }
:root {
  --font-display: "Yanone Kaffeesatz", "Barlow Condensed", sans-serif;
  --font-ui: "Barlow Condensed", "Avenir Next Condensed", Arial, sans-serif;
  --k: 1;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { display: grid; place-items: center; font: 500 14px/1.3 var(--font-ui); color: #eeeae0; }
/* the client is a 1024x768 screen: the stage keeps 4:3 at the largest size that fits the window */
#stage { position: relative; width: min(100vw, calc(100vh * 4 / 3)); aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
#stage.modern-menu { width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; }
#stage.modern-menu #overlay input { font-size: calc(15px * var(--k)); }
#ui { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: default; z-index: 2; }
#ui.pointer { cursor: pointer; }
#overlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#overlay input {
  position: absolute; pointer-events: auto; background: transparent; border: 0; outline: none; color: #f4f1e6;
  font: 600 calc(12px * var(--k)) / 1 var(--font-ui); padding: 0 calc(3px * var(--k)); caret-color: #ffc12e;
}
/* abertura e falha de abertura: cartão com o painel, a marca e as placas do atlas local (as classes .ma-panel, .ma-head, .ma-btn e .ma-bar são as de mobile.css) sobre o fundo local */
#stage:has(> #boot)::before { content: ""; position: absolute; inset: 0; z-index: 4; background: url("/g/skin/background.png") center / cover no-repeat; filter: contrast(.7) brightness(.44); pointer-events: none; }
#boot { --ma-display: var(--font-display); --ma-ui: var(--font-ui); --ma-gold: #ffe28a; --ma-steel: #c8dfe9; --ma-amber: #ffc12e; --ma-red: #ff786b; --ma-ivory: #f2f2e8; position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(88%, 540px); margin: 0; padding: 14px 26px 30px; display: grid; gap: 18px; justify-items: center; text-align: center; font: 600 24px/1.25 var(--font-ui); color: #f2f2e8; text-shadow: 0 1px 0 #000; text-wrap: balance; }
#boot .boot-logo { height: 68px; width: auto; }
#boot .ma-head { justify-self: stretch; margin: 0; text-align: left; }
#boot .ma-head .ti { text-transform: uppercase; }
#boot .ma-bar { justify-self: stretch; }
#boot .ma-btn { min-width: 240px; }
#overlay input.nickname { background: #142b3e; border: calc(1px * var(--k)) solid #ffc12e; border-radius: calc(3px * var(--k)); }

/* the match: the library's MatchView renders its lab layout into #view; only the stage stays, filling the screen */
#matchHost { position: absolute; inset: 0; }
#matchHost #view { position: absolute; inset: 0; display: block; }
#matchHost .col.left, #matchHost .col.right, #matchHost .clockline, #matchHost .section, #matchHost .eyebrow { display: none !important; }
#matchHost .col.center { position: absolute; inset: 0; padding: 0; margin: 0; }
#matchHost .stage-wrap, #matchHost .stage { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0; padding: 0; box-shadow: none; }
#matchHost canvas#gCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: crosshair; }
#matchHost .overlay { display: none !important; }
/* over the match the screen canvas only carries the popups (84 Gameend); it takes the mouse only while one is open */
#stage.in-match #ui { z-index: 2; pointer-events: none; }
#stage.in-match.popup #ui { pointer-events: auto; }

/* a popup takes the whole input: fields behind it (also made inert by client.js) stay out of the mouse's reach */
#stage.popup #overlay input { pointer-events: none; visibility: hidden; }

/* semantic bridge: transparent buttons over the canvas regions; the mouse keeps hitting the canvas, the keyboard and screen readers use these */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#a11y { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#a11y > div { position: absolute; inset: 0; pointer-events: none; }
#a11y button {
  position: absolute; margin: 0; padding: 0; border: 0; border-radius: calc(4px * var(--k)); appearance: none;
  background: transparent; color: transparent; font: inherit; pointer-events: none;
}
#a11y button:focus { outline: none; }
#a11y button:focus-visible, #overlay input:focus-visible {
  --ring: max(3px, calc(3px * var(--k))); --gap: max(2px, calc(2px * var(--k)));
  outline: var(--ring) solid #ffc12e; outline-offset: var(--gap); box-shadow: 0 0 0 calc(var(--gap) * 2 + var(--ring)) #000;
}
@media (forced-colors: active) {
  #a11y button:focus-visible, #overlay input:focus-visible { outline-color: Highlight; box-shadow: none; }
}