/* Required Notice: Copyright 2026 Petr Balvín <opensource@petrbalvin.org> (https://petrbalvin.org) */
/* SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0 */
/* House shared base, loaded by every page before its own sheet. The
   design tokens, the glyph sprite contract, the focus contract and the
   motion-sensitivity gate live here and nowhere else: a page sheet
   carries only what is genuinely its own, so the language cannot drift
   apart between the landing, the profile and the games. */
:root {
  --bg-dark: #030308;
  --text-main: #ffffff;
  --text-muted: #a0a0b0;
  --accent-cyan: #60efff;
  --accent-purple: #8a2be2;
  --accent-red: #ff3355;
  --accent-green: #00ff88;
  --accent-orange: #ff8800;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.2);
  --font-display: "Oxanium", "Ubuntu", sans-serif;
  --font-main: "Ubuntu", sans-serif;
  --font-mono: "Ubuntu Mono", monospace;
  --gradient-accent: linear-gradient(
    135deg,
    var(--accent-cyan),
    var(--accent-purple)
  );
  --glow-cyan: 0 0 20px rgba(96, 239, 255, 0.4);
  /* Materials every page builds from: the glass surfaces, the panel and
     control radii and the two panel gradients. A component anywhere in
     the project references these instead of restating a look, so the
     landing, the profile and the games cannot drift apart. */
  --surface: rgba(12, 15, 34, 0.72);
  --surface-deep: rgba(6, 8, 20, 0.9);
  --surface-border: rgba(255, 255, 255, 0.08);
  --panel-gradient: linear-gradient(
    170deg,
    rgba(18, 22, 46, 0.94),
    rgba(6, 8, 20, 0.96)
  );
  --radius-panel: 20px;
  --radius-control: 14px;
  --shadow-panel:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(96, 239, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* The house button, worn by every page. The display face, one radius,
   one weight of motion: hover answers with colour and a hairline lift,
   press settles down, and nothing ripples or sweeps. Game pages restyle
   it through their accent triplet alone. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-main);
  background: var(--surface);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--accent, var(--accent-cyan)),
    var(--accent-light, #9af3ff)
  );
  border-color: transparent;
  color: #06070d;
  box-shadow:
    0 4px 20px rgba(var(--accent-rgb, 96, 239, 255), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-secondary {
  background: var(--surface);
  border-color: rgba(var(--accent-rgb, 96, 239, 255), 0.3);
}

.btn-danger {
  background: rgba(255, 51, 85, 0.14);
  border-color: rgba(255, 51, 85, 0.35);
  color: var(--accent-red);
}

.btn-block {
  width: 100%;
}

@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
      0 10px 34px rgba(var(--accent-rgb, 96, 239, 255), 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  .btn-secondary:hover {
    background: rgba(var(--accent-rgb, 96, 239, 255), 0.12);
    border-color: rgba(var(--accent-rgb, 96, 239, 255), 0.5);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb, 96, 239, 255), 0.2);
  }

  .btn-danger:hover {
    background: rgba(255, 51, 85, 0.24);
    border-color: var(--accent-red);
    box-shadow: 0 8px 24px rgba(255, 51, 85, 0.25);
  }
}

/* House glyph sprite. The shared icon set is drawn with geometry only,
   so the look (colour, weight) is carried here and inherited into the
   <use> content. */
.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
/* The focus contract: the default ring is cleared, and whatever takes
   focus answers with the house outline the moment it is a keyboard
   focus, pointer clicks included in nothing. */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}
/* Skip link: the first focusable stop on every page, off-screen until
   keyboard focus brings it forward. One contract here because every
   page opens its body with the same markup. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100000;
  padding: 10px 18px;
  border-radius: var(--radius-control);
  background: var(--surface-deep);
  border: 1px solid var(--accent-cyan);
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}
/* Motion sensitivity: a visitor who asks the system for less motion
   gets the pages without the ambient movement. The important flags are
   the one legitimate way to reach every animation and transition no
   matter the specificity they were declared with; the rule lives only
   inside the media query, so it never touches an ordinary visit. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* Scrollbars in the house finish: quiet translucent thumbs over the
   page background instead of the browser's bright grey rails. The
   standard properties answer Chromium 121+, Safari and Firefox; the
   webkit pseudos below stay for older Chromium, which ignores them
   once the standard properties are set. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}