/* Central fynnland sign-in page. Colours, font and radii follow the fynnland launcher
   (fynnland.xyz/assets/css/site.css): near black, white type, small radii, one solid white button.
   The font files are the site's own on the same origin; elsewhere (local tests) the system font shows. */

@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 500; font-display: swap; src: url('/assets/fonts/jakarta-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-display: swap; src: url('/assets/fonts/jakarta-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-display: swap; src: url('/assets/fonts/jakarta-800.woff2') format('woff2'); }

:root {
  --base: #030508;
  --surface: #0e1116;
  --text: #ffffff;
  --text-2: rgb(255 255 255 / 0.78);
  --hair: rgb(255 255 255 / 0.12);
  --control: rgb(255 255 255 / 0.12);
  --control-hover: rgb(255 255 255 / 0.2);
  --control-line: rgb(255 255 255 / 0.2);
  --danger: #ff8a80;
  --r: 6px;
  --r-l: 10px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 32px;
  --bar-h: 64px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

/* Page scrollbar (BuyOut docs/DESIGN.md "Scrollleisten"). Mouse screens only; touch screens keep their
   native overlay bar and the page scroll that hides the address bar. The body scrolls instead of the
   window, so the bar lies over the page background and the lock-screen picture (a window scrollbar's
   room sits outside the fixed picture). Its room is kept on both edges: a section that grows past the
   window never moves anything sideways and the centred page stays centred. Thin square thumb on a
   see-through track (3.9:1 on --surface, 4.2:1 on --base). Chrome ignores ::-webkit-scrollbar once
   scrollbar-width/-color is set, so those two go to Firefox only. */
@media (hover: hover) and (pointer: fine) {
  html { height: 100%; overflow: hidden; }
  body { height: 100%; overflow-y: auto; scrollbar-gutter: stable both-edges; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #6b7280 padding-box; border: 2px solid transparent; border-radius: 0; }
  ::-webkit-scrollbar-thumb:hover { background-color: #9aa1ab; }
  @supports not selector(::-webkit-scrollbar) {
    body { scrollbar-width: thin; scrollbar-color: #6b7280 transparent; }
  }
}
body {
  margin: 0;
  background: radial-gradient(120% 80% at 50% 0%, #11151b 0%, var(--base) 70%) fixed, var(--base);
  color: var(--text);
  font: 500 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* Top bar, copied from the start page (.bar, .brand, .status in the site's site.css; its app-page variant). */
.bar {
  display: flex; align-items: center; gap: 24px;
  height: calc(var(--bar-h) + var(--safe-t));
  padding: var(--safe-t) calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
}
.brand {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font: 800 18px/1 var(--font); letter-spacing: -0.015em; color: var(--text); text-decoration: none;
}
.brand-mark { flex: none; display: block; }
/* Music switch of the lock-screen look, as the start page's .icon-btn. */
.icon-btn {
  display: grid; place-items: center; margin-left: auto;
  width: 44px; height: 44px; margin-right: -2px;
  background: none; border: 0; border-radius: var(--r);
  color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { background: rgb(255 255 255 / 0.1); color: var(--text); }
.icon-btn .ico-off, .icon-btn[aria-pressed='false'] .ico-on { display: none; }
.icon-btn[aria-pressed='false'] .ico-off { display: block; }
.icon-btn[aria-pressed='false'] { color: rgb(255 255 255 / 0.5); }
.status {
  margin-left: auto;
  font: 600 14px/1 var(--font); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.hub {
  min-height: calc(100vh - var(--bar-h) - var(--safe-t));
  min-height: calc(100dvh - var(--bar-h) - var(--safe-t));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 32px 16px;
}

.card {
  width: 100%; max-width: 420px;
  display: grid; gap: 14px;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
}

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

h1 { font: 800 26px/1.2 var(--font); letter-spacing: -0.02em; overflow-wrap: anywhere; }
h2 { font: 700 14px/1.3 var(--font); color: var(--text-2); margin-top: 6px; }
.lead { color: var(--text-2); }
.note { padding: 10px 12px; border: 1px solid var(--control-line); border-radius: var(--r); color: var(--text); }

.stack { display: grid; gap: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row.split { justify-content: space-between; }
.or { color: var(--text-2); font-size: 14px; text-align: center; }

.btn, .btn-primary, .link {
  font: 700 15px/1 var(--font); text-decoration: none; cursor: pointer;
  border-radius: var(--r);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  background: var(--control); color: var(--text);
  border: 1px solid var(--control-line);
  transition: background-color 220ms ease;
}
.btn:hover { background: var(--control-hover); }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
/* The one solid white control on screen: the step that goes on. */
.btn-primary {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; width: 100%;
  background: var(--text); color: #000; border: 0;
  overflow-wrap: anywhere; text-align: center; line-height: 1.2;
  transition: background-color 220ms ease;
}
.btn-primary:hover { background: #e9ebee; }
.btn-primary:active { transform: scale(0.98); }
.row .btn-primary { width: auto; flex: 1 1 auto; }
.link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  background: none; border: 0; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { color: var(--text); }
button:disabled { opacity: 0.6; cursor: progress; }

/* Sign-in buttons with each provider's mark, in the colours its brand rules allow. */
.provider { gap: 10px; padding: 0 16px; }
.provider .mark { flex: none; display: block; width: 20px; height: 20px; }
.provider .mark svg { display: block; }
.provider.discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.provider.discord:hover { background: #4752c4; border-color: #4752c4; }
/* Google's light button: white, grey outline, dark text (Google Identity branding guidelines). */
.provider.google { background: #fff; border-color: #747775; color: #1f1f1f; }
.provider.google:hover { background: #f2f2f2; }
.provider.google:focus-visible { outline-color: var(--text); }

.keyform { display: grid; gap: 6px; }
.keyform label { font: 700 14px/1.3 var(--font); color: var(--text-2); }
.keyform input {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px;
  background: var(--base); color: var(--text);
  border: 1px solid var(--control-line); border-radius: var(--r);
  font: 500 15px/1 var(--font); letter-spacing: 0.02em;
}
.keyform input::placeholder { color: rgb(255 255 255 / 0.55); }

.key {
  padding: 14px 12px; border: 1px solid var(--control-line); border-radius: var(--r);
  font: 700 18px/1.4 var(--font); letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all;
}

/* Rows with a 44 px button: 6 px above and below, none at the ends, so the list sits as close to its heading
   and hint as the other blocks of a section. */
.ways li, .games li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--hair);
}
.ways li:first-child, .games li:first-child { border-top: 0; padding-top: 0; }
.ways li:last-child, .games li:last-child { padding-bottom: 0; }
.ways li > span:first-child { color: var(--text-2); }
.ways li.on > span:first-child { color: var(--text); font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.way { display: inline-flex; align-items: center; gap: 10px; }
.way .mark { flex: none; width: 18px; height: 18px; }
.way .mark svg { display: block; width: 18px; height: 18px; }

.danger-zone { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }

.legal { display: flex; gap: 16px; font-size: 14px; }
.legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); }
.legal a:hover { color: var(--text); }

@media (max-width: 639px) {
  :root { --gutter: 16px; --bar-h: 56px; }
  .bar { gap: 12px; }
  .brand { font-size: 15px; gap: 8px; }
  .brand-mark { width: 20px; height: 20px; }
  .status { font-size: 13px; }
  .hub { justify-content: flex-start; padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn-primary:active { transform: none; }
}

.hint { font-size: 14px; color: var(--text-2); }
.eyebrow { font: 700 13px/1.2 var(--font); color: var(--text-2); text-align: center; letter-spacing: 0.02em; margin-bottom: -8px; }
.state { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--text-2); }
.link.small { font-size: 14px; padding: 0 6px; }
.away { min-height: 44px; }

/* Lock-screen look (?ui=hub, opened from the start page): its background picture blurred and dimmed,
   the large clock and date, a round avatar, no card surface. */
body.lock { background: var(--base); }
.lock-bg {
  /* Below the body's own layer, so the body's scrollbar is drawn over the picture, not under it. */
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #11151b 0%, var(--base) 70%);
}
.lock-bg img {
  position: absolute; inset: -64px; width: calc(100% + 128px); height: calc(100% + 128px);
  object-fit: cover; filter: blur(32px) saturate(1.15); opacity: 0;
  transition: opacity 600ms ease;
}
.lock-bg img.on { opacity: 1; }
.lock-bg::after { content: ''; position: absolute; inset: 0; background: rgb(3 5 8 / 0.58); }
body.lock .bar, body.lock .hub, .lock-time { position: relative; z-index: 1; }

.lock-time {
  display: grid; gap: 6px; pointer-events: none;
  padding: 8px calc(var(--gutter) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  text-align: center;
}
.lock-time time {
  font: 700 56px/0.95 var(--font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.35);
}
.lock-time span { font: 600 16px/1.3 var(--font); color: var(--text-2); }
@media (max-width: 639px) {
  .lock-time { padding-top: 0; gap: 4px; }
  .avatar { width: 80px; height: 80px; font-size: 34px; }
  .avatar svg { width: 32px; height: 32px; }
  /* A tall screen shows only a strip of the wide picture: less dimming, so it still reads as the same screen. */
  .lock-bg img { object-position: 30% 50%; filter: blur(24px) saturate(1.3); }
  .lock-bg::after { background: rgb(3 5 8 / 0.42); }
}

body.lock .hub { min-height: 0; padding-top: 16px; animation: lock-in 200ms ease-out both; }
@keyframes lock-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lock-card { background: none; border: 0; padding: 8px 0; max-width: 360px; }
.lock-card h1 { text-align: center; }
.avatar {
  justify-self: center; display: grid; place-items: center;
  width: 104px; height: 104px; border-radius: 50%;
  background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.22);
  font: 800 44px/1 var(--font); color: var(--text);
}
.avatar svg { display: block; }
.lock-card .keyform input { background: rgb(3 5 8 / 0.55); }
.lock-card .or { color: var(--text-2); }

/* Wide screens: the clock bottom left like an OS lock screen, the sign-in centred on its own. */
@media (min-width: 1100px) and (min-height: 640px) {
  .lock-time {
    position: fixed; left: 0; bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 0 calc(56px + var(--safe-l)); text-align: left;
  }
  .lock-time time { font-size: 112px; }
  .lock-time span { font-size: 24px; }
  body.lock .hub {
    min-height: calc(100vh - var(--bar-h) - var(--safe-t));
    min-height: calc(100dvh - var(--bar-h) - var(--safe-t));
    padding-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lock-bg img { transition: none; }
  body.lock .hub { animation: none; }
}

/* ---- Signed-in account page: section list (nav) and the open section (pane). On phones the list and
   one section take turns (#hash open = section, no hash = list); from 760 px both side by side. */
:root { --danger-fill: #c62828; --danger-fill-hover: #a51f1f; --danger-line: #e5534b; }
body.managing .hub { justify-content: flex-start; }
.manage {
  width: 100%; max-width: 940px;
  display: grid; gap: 16px; align-items: start;
}
.side, .pane {
  display: grid; gap: 14px; align-content: start;
  padding: 24px; min-width: 0;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-l);
}
.who-am-i { display: flex; align-items: center; gap: 14px; min-width: 0; }
.who-am-i h1 { font-size: 20px; overflow-wrap: anywhere; }
.who-am-i .eyebrow { text-align: left; margin: 0 0 2px; }
.avatar.small { width: 52px; height: 52px; font-size: 22px; flex: none; justify-self: auto; }
.avatar.small svg { width: 22px; height: 22px; }
.side ul { display: grid; gap: 2px; }
.side a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--r); color: var(--text-2); text-decoration: none; font-weight: 700;
}
.side a:hover { background: rgb(255 255 255 / 0.08); color: var(--text); }
.side a[aria-current='page'] { background: var(--control); color: var(--text); }
.side li.danger { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.side li.danger a { color: var(--danger); }
.pane h2 { font: 800 22px/1.25 var(--font); color: var(--text); margin: 0; letter-spacing: -0.01em; }
.pane h2:focus { outline: none; }
.pane h2:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.pane h3 { font: 700 15px/1.3 var(--font); margin: 10px 0 -4px; padding-top: 14px; border-top: 1px solid var(--hair); }
.pane h3:first-of-type { border-top: 0; padding-top: 0; }
.pane .back { justify-self: start; text-decoration: none; margin: -12px 0 -6px -2px; }
.pane .back:hover { text-decoration: underline; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.facts dt { color: var(--text-2); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.hints { display: grid; gap: 6px; }
.hints li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding: 6px 12px; border: 1px solid var(--control-line); border-radius: var(--r);
}

.field { display: grid; gap: 6px; }
.field label, .box label { font: 700 14px/1.3 var(--font); color: var(--text-2); }
.field input, .box input {
  flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px;
  background: var(--base); color: var(--text);
  border: 1px solid var(--control-line); border-radius: var(--r);
  font: 500 15px/1 var(--font);
}
.field input:disabled { opacity: 0.7; }

.box { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--control-line); border-radius: var(--r-l); background: rgb(255 255 255 / 0.03); }
.box h4 { margin: 0; font: 700 16px/1.3 var(--font); }
.box h4:focus { outline: none; }
.box.confirm { border-color: var(--text-2); }
.box.confirm h3 { margin: 0; padding: 0; border: 0; }
.qr { justify-self: start; line-height: 0; padding: 0; border-radius: var(--r); overflow: hidden; }
.qr svg { display: block; width: 192px; height: 192px; }
.secret { font: 700 16px/1.5 var(--font); letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }
.codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 28px;
  margin: 0; padding: 0; list-style: none; font: 700 16px/1.5 var(--font); letter-spacing: 0.06em; user-select: all;
  font-variant-numeric: tabular-nums;
}

.list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  padding: 10px 0; border-top: 1px solid var(--hair);
}
.list li:first-child { border-top: 0; }
.list li.ask { display: grid; gap: 10px; }
.list li.ask p:focus:not(:focus-visible) { outline: none; }
.list li.ask .ask-title { font-weight: 700; }
.list li.ask .bullets { display: grid; gap: 4px; margin: 0; padding-left: 20px; list-style: disc; color: var(--text-2); }
.list li.ask .bullets li { display: list-item; padding: 0; border: 0; }
.who { display: grid; gap: 2px; min-width: 0; }
.dev { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.tag { font: 700 12px/1 var(--font); padding: 4px 8px; border-radius: var(--r); background: var(--control); color: var(--text); }
.dots { display: grid; gap: 4px; padding-left: 1.2em; list-style: disc; color: var(--text-2); }

/* Danger zone: red frame and fill; the button white on red (5.6:1, hover 7.1:1). */
.pane.danger-zone { border-color: var(--danger-line); background: linear-gradient(rgb(198 40 40 / 0.12), rgb(198 40 40 / 0.12)), var(--surface); }
.pane.danger-zone h2 { color: var(--danger); }
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r);
  background: var(--danger-fill); color: #fff; font: 700 15px/1.2 var(--font); cursor: pointer;
  transition: background-color 220ms ease;
}
.btn-danger:hover { background: var(--danger-fill-hover); }
.btn-danger.small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.btn-danger:disabled { opacity: 1; background: rgb(198 40 40 / 0.35); color: rgb(255 255 255 / 0.75); cursor: not-allowed; }

/* "Sign out" in the top bar, always in reach while the account is open. */
.bar-out {
  min-height: 44px; padding: 0 14px; margin-left: 12px;
  background: var(--control); color: var(--text); border: 1px solid var(--control-line); border-radius: var(--r);
  font: 700 14px/1 var(--font); cursor: pointer;
}
.bar-out:hover { background: var(--control-hover); }
/* Lock-screen look: the bar lies on the background picture; on a bright spot the see-through fill
   would leave white on grey at 4.1 : 1, the solid surface keeps it above 15 : 1. */
body.lock .bar-out { background: var(--surface); }
body.lock .bar-out:hover { background: #1b2028; }
.brand + .bar-out { margin-left: auto; }

@media (max-width: 759px) {
  .manage[data-open] .side { display: none; }
  .manage:not([data-open]) .pane { display: none; }
  .side, .pane { padding: 20px 16px; }
}
@media (min-width: 760px) {
  /* 288 px with 16 px side padding: "Anmeldung und Sicherheit" and a 20-character name fit on one line. */
  .manage { grid-template-columns: 288px minmax(0, 1fr); }
  .side { padding: 20px 16px; }
  .side { position: sticky; top: 16px; }
  .pane .back { display: none; }
}
@media (max-width: 359px) {
  /* Narrow phones: the small clock gives way to "Sign out". */
  body.managing .status { display: none; }
  body.managing .bar-out { margin-left: auto; }
}
@media (max-width: 400px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
  .codes { grid-template-columns: 1fr; }
}

/* Lock-screen look, signed in: the account is open, so the big clock steps aside; surfaces stay solid. */
body.lock.managing .lock-time { display: none; }
body.lock .side, body.lock .pane { background: rgb(14 17 22 / 0.86); }
body.lock .pane.danger-zone { background: linear-gradient(rgb(198 40 40 / 0.14), rgb(198 40 40 / 0.14)), rgb(14 17 22 / 0.9); }