/* The studio look for browser games hosted here: the same colours, rounded type and gold buttons as quietgiantgames.fun.
   No external fonts: Fishdayz's rounded stack for headings and buttons, the site's system stack for reading. */
:root {
  --qg-night: #0d1630;
  --qg-night2: #16244a;
  --qg-card: #1b2c5a;
  --qg-line: rgba(255, 255, 255, .14);
  --qg-text: #eef2ff;
  --qg-muted: #b9c3e6;
  --qg-gold: #ffc24a;
  --qg-orange: #f29a3a;
  --qg-round: "Arial Rounded MT Bold", "VAG Rounded", "Nunito", "Trebuchet MS", Arial, sans-serif;
  --qg-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.qg-bar {
  position: fixed; z-index: 2147482000; left: max(10px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 20px);
}
.qg-bar[hidden], .qg-legal[hidden], .qg-acct[hidden] { display: none; }
.qg-mark {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: rgba(13, 22, 48, .88); border: 1px solid var(--qg-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  color: var(--qg-text); text-decoration: none; font-family: var(--qg-round); line-height: 1.1;
}
.qg-mark img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.qg-mark span { display: flex; flex-direction: column; min-width: 0; }
.qg-mark b { font-size: 15px; font-weight: 700; color: var(--qg-gold); }
.qg-mark i { font-size: 11px; font-style: normal; color: var(--qg-muted); }
.qg-acct {
  flex: 0 1 auto; min-width: 0; max-width: 42vw; height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; overflow: hidden;
  background: rgba(13, 22, 48, .88); border: 1px solid rgba(255, 194, 74, .6); color: var(--qg-gold);
  font: 700 13px var(--qg-round); white-space: nowrap; text-overflow: ellipsis;
}
.qg-legal {
  position: fixed; z-index: 2147482000; right: max(10px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(13, 22, 48, .82);
  border: 1px solid var(--qg-line); color: var(--qg-muted); font: 700 11px/1.5 var(--qg-body);
}
.qg-legal a { color: var(--qg-muted); text-decoration: none; }
.qg-legal a:hover { color: var(--qg-gold); }

.qg-age {
  position: fixed; z-index: 2147483000; inset: 0; display: flex; padding: 12px; overflow: auto;
  background: radial-gradient(900px 400px at 70% -10%, #2c3f7a 0%, transparent 60%), linear-gradient(var(--qg-night2), var(--qg-night));
  color: var(--qg-text); font: 16px/1.5 var(--qg-body);
}
.qg-age-box {
  margin: auto; width: min(420px, 100%); padding: 22px 24px; text-align: center; outline: none; border-radius: 18px;
  background: var(--qg-card); border: 1px solid rgba(255, 194, 74, .5); box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.qg-age-box h2 { margin: 0 0 6px; font: 700 24px/1.2 var(--qg-round); color: var(--qg-gold); }
.qg-age-box p { margin: 0 0 12px; color: var(--qg-muted); }
.qg-age-row { display: flex; gap: 10px; margin: 0 0 14px; }
.qg-age-row select { flex: 1; min-width: 0; padding: 11px 10px; border-radius: 12px; border: 2px solid var(--qg-line); background: var(--qg-night); color: var(--qg-text); font: 700 16px var(--qg-body); }
.qg-age-row select:focus { outline: none; border-color: var(--qg-gold); }
.qg-age-err { color: #ffb4a8 !important; font-weight: 700; }
.qg-btn {
  display: inline-block; padding: 12px 30px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: linear-gradient(var(--qg-gold), var(--qg-orange)); color: #3a1a00; font: 800 17px var(--qg-round);
  box-shadow: 0 6px 20px rgba(242, 154, 58, .35);
}
.qg-btn:hover { transform: translateY(-1px); }
.qg-fine { margin: 14px 0 0 !important; font-size: 13px; }
.qg-fine a { color: var(--qg-gold); }
.qg-field { display: block; margin: 0 0 10px; text-align: left; color: var(--qg-muted); font: 700 14px var(--qg-body); }
.qg-field input {
  display: block; box-sizing: border-box; width: 100%; margin-top: 4px; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--qg-line);
  background: var(--qg-night); color: var(--qg-text); font: 16px var(--qg-body); -webkit-user-select: text; user-select: text;
}
.qg-field input:focus { outline: none; border-color: var(--qg-gold); }
.qg-age-box p.qg-hint { margin: -6px 0 10px; text-align: left; font-size: 13px; }
.qg-link { display: inline-block; margin: 10px 8px 0; padding: 6px 4px; border: 0; background: none; color: var(--qg-gold); font: 700 14px var(--qg-body); text-decoration: underline; cursor: pointer; }
.qg-steps { margin: 0 0 16px; padding-left: 22px; text-align: left; color: var(--qg-text); }
.qg-steps li + li { margin-top: 6px; }