/* The boxes stand in front of the crowd (z-index 2, splash.css); the empty stage lets a click through to the crowd. */
.uvod-stage { z-index: 3; pointer-events: none; }
.uvod-stage > * { pointer-events: auto; }

/* The login form and the status page of Gamers\Http\EntryGate, under the plate: the crowd grows with the window and fills the bottom.
   The colours are the tokens of splash.css. */
.uvod-ulaz {
    margin-top: calc(var(--g) * 0.16);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: rgba(7, 6, 10, 0.82);
    border: 1px solid var(--orange);
    font: bold 12px/1.4 Verdana, Tahoma, sans-serif;
}
.uvod-ulaz label { color: var(--orange-light); text-transform: uppercase; letter-spacing: 0.08em; }
.uvod-ulaz input:is([type=password], [type=text], [type=email]) {
    width: 14em;
    padding: 5px 8px;
    border: 1px solid var(--muted);
    background: var(--ink);
    color: var(--paper);
    font: inherit;
}
/* iOS zooms into a focused field with a font under 16px. */
@media (pointer: coarse) {
    .uvod-ulaz input:is([type=password], [type=text], [type=email]) { font-size: 16px; }
}
.uvod-ulaz input:is([type=password], [type=text], [type=email]):focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.uvod-ulaz button {
    padding: 5px 14px;
    border: 0;
    background: var(--orange);
    color: var(--ink);
    font: inherit;
    text-transform: uppercase;
    cursor: pointer;
}
.uvod-ulaz button:hover, .uvod-ulaz button:focus-visible { background: var(--orange-light); }
.uvod-ulaz-error { flex-basis: 100%; margin: 0; text-align: center; color: #ff6b5a; }
.uvod-ulaz-help { flex-basis: 100%; margin: 0; display: flex; justify-content: center; gap: 16px; font-weight: normal; }
.uvod-ulaz-help a, .uvod-status a { color: var(--orange-light); }
/* The login: one column on a phone, the two fields and the button in one row from 600px. */
.uvod-login { display: grid; grid-template-columns: 1fr; gap: 10px; width: min(100%, 320px); padding: 16px; text-align: left; }
.uvod-login > .uvod-ulaz-help, .uvod-login > .uvod-ulaz-error { grid-column: 1 / -1; }
.uvod-ulaz-field { display: flex; flex-direction: column; gap: 4px; }
.uvod-login .uvod-ulaz-field input { width: 100%; box-sizing: border-box; padding: 8px; }
.uvod-login button { padding: 9px 18px; }
@media (min-width: 600px) {
    .uvod-login { width: auto; grid-template-columns: 14em 14em auto; align-items: end; }
}
.uvod-status { flex-direction: column; max-width: 34em; color: var(--paper); font-weight: normal; text-align: center; }
.uvod-status p { margin: 0; }
.uvod-status-title { color: var(--orange-light); font-weight: bold; text-transform: uppercase; letter-spacing: 0.08em; }
.uvod-status-ok { color: #8fd18f; }
.uvod-status-email { color: var(--orange-light); white-space: nowrap; }
.uvod-status-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.uvod-status-form > p { flex-basis: 100%; }
.uvod-status details { flex-basis: 100%; }
.uvod-status details > :not(summary) { margin: 8px 4px 0; }
.uvod-status summary { display: inline-block; padding: 5px 14px; border: 1px solid var(--orange); color: var(--orange-light); cursor: pointer; text-transform: uppercase; list-style: none; }
.uvod-status summary::-webkit-details-marker { display: none; }
.uvod-status .uvod-status-logout { background: none; border: 1px solid var(--muted); color: var(--muted); }
/* The panel (templates/common/_entry_panel.html.twig): it takes the place of the logo and the plate while it is open,
   above the crowd, and holds the help and every page of the closed host (common/entry_shell.html.twig). */
.uvod--panel .uvod-stage { padding-top: max(4vh, 16px); }
.uvod--panel .uvod-title, .uvod--panel .uvod-canvas, .uvod--panel .uvod-stage > .uvod-ulaz:not(.uvod-panel) { display: none; }
.uvod--panel.is-3d .uvod-collage { display: grid; }
.uvod-panel[hidden] { display: none; }
.uvod-panel {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 36em);
    padding: 20px 20px 18px;
    color: var(--paper);
    font-weight: normal;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.uvod-panel[aria-busy="true"] .uvod-panel-body { opacity: 0.45; transition: opacity 0.15s; }
.uvod-panel-close {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--orange-light);
    font: bold 16px/1 Verdana, Tahoma, sans-serif;
    text-decoration: none;
}
.uvod-panel-close:hover, .uvod-panel-close:focus-visible { color: var(--ink); background: var(--orange); }
.uvod-panel-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.uvod-panel-body > .uvod-status-title { padding: 0 28px; }
.uvod-help-way { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.uvod-help-way > p { flex-basis: 100%; margin: 0; }
.uvod-help-steam { display: inline-block; padding: 7px 16px; background: #171a21; border: 1px solid #66c0f4; color: #c7d5e0; text-decoration: none; text-transform: uppercase; font-weight: bold; }
.uvod-help-steam:hover, .uvod-help-steam:focus-visible { background: #1b2838; color: #ffffff; }
/* The card of the logged-in member on /uvod: the avatar and the basic facts, then the way on. */
.uvod-card { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: left; }
.uvod-card-avatar { width: 75px; height: 75px; object-fit: cover; border: 1px solid var(--orange); background: var(--ink); image-rendering: pixelated; }
.uvod-card-facts p { margin: 0; }
.uvod-card-name { color: var(--orange-light); font-weight: bold; font-size: 15px; }
.uvod-status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.uvod-button { display: inline-block; padding: 7px 16px; background: var(--orange); color: var(--ink) !important; font-weight: bold; text-transform: uppercase; text-decoration: none; }
.uvod-button:hover, .uvod-button:focus-visible { background: var(--orange-light); }

/* A page of the closed host in the panel: the v3 and v4 pages keep their markup and take the colours of the box. Their
   tables and headings carry inline fonts of 2007, hence the !important. */
.uvod-panel-body table, .uvod-panel-body td { width: 100%; border: 0; background: none !important; color: inherit; font: inherit !important; text-align: left; }
.uvod-panel-body td { padding: 0 !important; }
.uvod-panel-body h1, .uvod-panel-body h2, .uvod-panel-body h3 { margin: 0 32px 10px 0 !important; color: var(--orange-light); font: bold 13px/1.4 Verdana, Tahoma, sans-serif !important; letter-spacing: 0.08em; text-transform: uppercase; }
.uvod-panel-body p { margin: 0 0 8px; }
.uvod-panel-body a { color: var(--orange-light); }
.uvod-panel-body img { max-width: 100%; height: auto; }
.uvod-panel-body .gf { margin: 8px 0; padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.03); color: var(--paper); }
.uvod-panel-body .gf-panel-head { margin: 0; padding: 6px 10px; background: rgba(255, 153, 0, 0.16); color: var(--orange-light); font-weight: bold; text-transform: uppercase; letter-spacing: 0.08em; }
.uvod-panel-body .gf-intro { margin: 0; padding: 8px 10px; }
.uvod-panel-body .gf-row { display: grid; grid-template-columns: 11em minmax(0, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.uvod-panel-body .gf-label { padding: 8px 10px; color: var(--orange-light); font-weight: bold; }
.uvod-panel-body .gf-field { min-width: 0; padding: 6px 10px; }
.uvod-panel-body .gf-help { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.uvod-panel-body .gf-errors { margin: 4px 0 0; padding: 0; list-style: none; color: #ff6b5a; font-weight: bold; }
.uvod-panel-body .gf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.uvod-panel-body .gf-alert, .uvod-panel-body .gf-notice, .uvod-panel-body .gf-saved { margin: 0 0 8px; padding: 6px 10px; border: 1px solid; list-style: none; }
.uvod-panel-body .gf-alert { border-color: #ff6b5a; color: #ff6b5a; font-weight: bold; }
.uvod-panel-body .gf-notice { border-color: rgba(255, 255, 255, 0.2); }
.uvod-panel-body .gf-saved { border-color: #8fd18f; color: #8fd18f; font-weight: bold; }
.uvod-panel-body :is(input[type=text], input[type=password], input[type=email], input[type=number], select, textarea) {
    box-sizing: border-box;
    width: 100%;
    max-width: 22em;
    padding: 7px 8px;
    border: 1px solid var(--muted);
    background: var(--ink);
    color: var(--paper);
    font: 12px Verdana, Tahoma, sans-serif;
}
.uvod-panel-body :is(input, select, textarea):focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.uvod-panel-body :is(button[type=submit], .gf-button, input[type=submit]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 16px;
    border: 0;
    border-radius: 0;
    background: var(--orange);
    color: var(--ink);
    font: bold 12px Verdana, Tahoma, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.uvod-panel-body :is(button[type=submit], .gf-button, input[type=submit]):hover { background: var(--orange-light); }
.uvod-panel-body .gf-button--quiet { background: none; border: 1px solid var(--muted); color: var(--paper); }
.uvod-panel-body input[type=image] { width: auto; max-width: none; padding: 0; border: 0; background: none; }

/* A phone: the panel fills the width, the rows of a form stack, and every field is 16px so iOS does not zoom. */
@media (max-width: 600px) {
    .uvod-panel { width: 100%; padding: 16px 12px 14px; }
    .uvod-panel-body .gf-row { grid-template-columns: 1fr; }
    .uvod-panel-body .gf-label { padding-bottom: 0; }
    .uvod-help-form input, .uvod-panel-body input:is([type=text], [type=password], [type=email]) { width: 100%; max-width: none; }
    .uvod-card { flex-direction: column; text-align: center; }
}
@media (pointer: coarse) {
    .uvod-panel-body :is(input, select, textarea) { font-size: 16px; }
}