/**
 * games.studiotypo.xyz — design language synced with studiotypo.xyz
 * (Space Mono only, keycap UI, red squiggly brand mark, dark default.)
 */

/* ==========================================
   Fonts (self-hosted)
   ========================================== */

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/SpaceMono-Bold.woff2") format("woff2");
}

/* ==========================================
   Tokens — kept in sync with studiotypo.xyz
   ========================================== */

:root {
  --bg-primary: #0f1114;
  --bg-secondary: #0c0c10;
  --bg-tertiary: #16161c;

  --text-primary: #ffffff;
  --text-secondary: #9a9aa4;
  --text-tertiary: #8a8a94;

  --accent: #ffffff;
  --accent-subtle: rgba(255, 255, 255, 0.08);

  --typo-letter-a: #2dd4bf;
  --typo-letter-c: #a78bfa;
  --typo-letter-r: #34d399;
  --typo-squiggly: #ff3b30;
  --typo-highlight-border: #0080fe;

  --border-primary: #3a3a44;
  --border-secondary: #4a4a54;

  --font-mono: "Space Mono", "SF Mono", "Consolas", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-key-press: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

  --ls-widest: 0.1em;
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #eeeeee;

  --text-primary: #0f1114;
  --text-secondary: #5a5a64;
  --text-tertiary: #5e5e68;

  --accent: #000000;
  --accent-subtle: rgba(0, 0, 0, 0.08);

  --typo-letter-a: #0d9488;
  --typo-letter-c: #7c3aed;
  --typo-letter-r: #059669;
  --typo-squiggly: #dc2626;
  --typo-highlight-border: #8080ff;

  --border-primary: #cccccc;
  --border-secondary: #aaaaaa;

  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   Base
   ========================================== */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

::selection {
  background: var(--accent-subtle);
  color: var(--text-primary);
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* Brand mark: red squiggly underline */
.squiggly,
.wordmark:hover,
.footer-link:hover,
.nav-link:hover,
.row-url:hover {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--typo-squiggly);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Monospace uppercase micro-label */
.micro-label,
.card-play,
.admin-badge,
.path-indicator {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
}

/* ==========================================
   Header
   ========================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-primary);
}

.nav {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.wordmark {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.path-indicator {
  color: var(--text-secondary);
  white-space: nowrap;
}

.admin-badge {
  color: var(--typo-letter-a);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.nav-link {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-link:hover {
  color: var(--text-primary);
}

/* ==========================================
   Keycap button (theme toggle) — same SVG
   keycap shape as studiotypo.xyz
   ========================================== */

.keycap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  width: 44px;
  height: 44px;
  transition: transform var(--duration-fast) var(--ease-key-press);
}

.keycap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 123' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M110.886,49.27l0,43.861c0,12.104 -9.827,21.93 -21.93,21.93l-55.031,0c-12.104,0 -21.93,-9.827 -21.93,-21.93l-0,-43.861' fill='%230c0c10' stroke='%233a3a44' stroke-width='2.1'/%3E%3Cpath d='M110.886,31.514l0,43.861c0,12.104 -9.827,21.93 -21.93,21.93l-55.031,0c-12.104,0 -21.93,-9.827 -21.93,-21.93l-0,-43.861c0,-12.104 9.827,-21.93 21.93,-21.93l55.031,0c12.104,0 21.93,9.827 21.93,21.93Z' fill='%230f1114' stroke='%235a5a64' stroke-width='2.1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: filter var(--duration-fast) var(--ease-out);
}

[data-theme="light"] .keycap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 123' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M110.886,49.27l0,43.861c0,12.104 -9.827,21.93 -21.93,21.93l-55.031,0c-12.104,0 -21.93,-9.827 -21.93,-21.93l-0,-43.861' fill='%23f0f0f0' stroke='%23b0b0b0' stroke-width='2.1'/%3E%3Cpath d='M110.886,31.514l0,43.861c0,12.104 -9.827,21.93 -21.93,21.93l-55.031,0c-12.104,0 -21.93,-9.827 -21.93,-21.93l-0,-43.861c0,-12.104 9.827,-21.93 21.93,-21.93l55.031,0c12.104,0 21.93,9.827 21.93,21.93Z' fill='%23ffffff' stroke='%23979797' stroke-width='2.1'/%3E%3C/svg%3E");
}

.keycap:hover::before {
  filter: brightness(1.15);
}

.keycap:active {
  transform: translateY(2px);
}

.keycap:active::before {
  filter: brightness(0.9);
}

.keycap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.keycap::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  top: -9%;
  background: var(--text-secondary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.keycap:hover::after {
  background: var(--text-primary);
}

/* Theme toggle icon — sun (dark mode active) */
.theme-toggle::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

/* Theme toggle icon — moon (light mode active) */
[data-theme="light"] .theme-toggle::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

/* ==========================================
   Layout
   ========================================== */

.page {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-16);
}

/* ==========================================
   Hero
   ========================================== */

.hero {
  padding: var(--space-16) 0 var(--space-12);
}

.hero-title {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.typo-letter {
  color: var(--typo-letter-a);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--typo-squiggly);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.hero-sub {
  margin: var(--space-4) 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
}

/* ==========================================
   Games grid
   ========================================== */

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transform: translateY(0);
  transition:
    transform var(--duration-fast) var(--ease-key-press),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  animation: cardEnter 500ms var(--ease-out) both;
  animation-delay: calc(var(--stagger, 0) * 80ms);
}

.game-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-secondary);
  box-shadow: var(--shadow-lg);
}

.game-card:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-md);
}

.game-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.card-preview {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}

.card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--duration-normal) var(--ease-out);
}

.game-card:hover .card-preview img {
  transform: scale(1.04);
}

.card-preview-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--border-primary);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.card-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.game-card:hover .card-name {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--typo-squiggly);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.card-desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-play {
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease-out);
}

.card-arrow {
  font-size: 0.85em;
  transition: color var(--duration-fast) var(--ease-out);
}

.game-card:hover .card-play {
  color: var(--text-primary);
}

.game-card:hover .card-arrow {
  color: var(--typo-squiggly);
}

.external-arrow {
  font-size: 0.7em;
  color: var(--text-secondary);
  vertical-align: super;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover .external-arrow {
  color: var(--typo-squiggly);
}

/* Entrance animation */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   Empty state
   ========================================== */

.empty-state {
  padding: var(--space-12) 0;
  color: var(--text-secondary);
}

.empty-state p {
  margin: 0;
}

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: var(--space-1);
  vertical-align: text-bottom;
  background: var(--text-secondary);
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* ==========================================
   Footer
   ========================================== */

.site-footer {
  border-top: 1px solid var(--border-primary);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-link:hover {
  color: var(--text-primary);
}

/* ==========================================
   Admin panel
   ========================================== */

.admin-head {
  padding: var(--space-12) 0 var(--space-8);
}

.admin-title {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
}

.admin-sub {
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-row {
  display: grid;
  grid-template-columns: 96px minmax(140px, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.admin-row:hover {
  border-color: var(--border-secondary);
}

.admin-row.is-disabled {
  opacity: 0.55;
}

.row-thumb {
  position: relative;
  display: block;
  width: 96px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}

.row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.row-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--border-primary);
}

.row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.row-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-slug {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-url {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.row-url:hover {
  color: var(--text-primary);
}

/* Keycap-style ON/OFF toggle */
.toggle-btn {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  min-width: 64px;
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + 2px);
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-bottom-width: 3px;
  border-radius: var(--radius-sm);
  transform: translateY(0);
  transition:
    transform var(--duration-fast) var(--ease-key-press),
    filter var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.toggle-btn:hover {
  filter: brightness(1.15);
}

.toggle-btn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
  filter: brightness(0.9);
}

.toggle-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.toggle-btn[aria-pressed="true"] {
  color: var(--typo-letter-r);
  border-color: var(--typo-letter-r);
}

.toggle-btn[aria-pressed="false"] {
  color: var(--typo-squiggly);
  border-color: var(--border-primary);
}

/* ==========================================
   Login
   ========================================== */

.page-login {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.login-box {
  width: 100%;
  max-width: 360px;
  margin-top: clamp(48px, 16vh, 128px);
  padding: var(--space-8);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  animation: cardEnter 400ms var(--ease-out) both;
}

.login-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.login-sub {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.login-error {
  margin: 0 0 var(--space-4);
  font-size: 0.875rem;
  color: var(--typo-squiggly);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--typo-squiggly);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.micro-label {
  color: var(--text-secondary);
}

/* Underline-only input */
.underline-input {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-primary);
  border-radius: 0;
  padding: var(--space-2) 0;
  outline: none;
  caret-color: var(--typo-squiggly);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.underline-input:focus {
  border-bottom-color: var(--text-primary);
}

/* ==========================================
   Wide keycap submit (9-slice, same SVG as
   studiotypo.xyz key-9slice-icon)
   ========================================== */

.key-wide {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  padding: 10px 32px 16px;
  border: 2px solid transparent;
  outline: none;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 246 246' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M230.591,160.156l0,43.861c-0,8.505 -4.852,15.885 -11.936,19.522c-2.998,1.539 -6.396,2.408 -9.995,2.408l-171.562,0c-12.104,0 -21.93,-9.827 -21.93,-21.93l0,-43.861' fill='%230c0c10' stroke='%233a3a44' stroke-width='2.1'/%3E%3Cpath d='M37.099,208.19c-12.104,0 -21.93,-9.827 -21.93,-21.93l0,-144.516c0,-12.104 9.827,-21.93 21.93,-21.93l171.562,0c12.104,0 21.93,9.827 21.93,21.93l0,144.516c0,12.104 -9.827,21.93 -21.93,21.93l-171.562,0Z' fill='%230f1114' stroke='%235a5a64' stroke-width='2.1'/%3E%3C/svg%3E");
  border-image-slice: 25% fill;
  border-image-width: 16px;
  border-image-repeat: stretch;
  transition:
    filter var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-key-press);
}

[data-theme="light"] .key-wide {
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 246 246' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M230.591,160.156l0,43.861c-0,8.505 -4.852,15.885 -11.936,19.522c-2.998,1.539 -6.396,2.408 -9.995,2.408l-171.562,0c-12.104,0 -21.93,-9.827 -21.93,-21.93l0,-43.861' fill='%23f0f0f0' stroke='%23b0b0b0' stroke-width='2.1'/%3E%3Cpath d='M37.099,208.19c-12.104,0 -21.93,-9.827 -21.93,-21.93l0,-144.516c0,-12.104 9.827,-21.93 21.93,-21.93l171.562,0c12.104,0 21.93,9.827 21.93,21.93l0,144.516c0,12.104 -9.827,21.93 -21.93,21.93l-171.562,0Z' fill='%23ffffff' stroke='%23979797' stroke-width='2.1'/%3E%3C/svg%3E");
}

.key-wide:hover {
  filter: brightness(1.3);
}

.key-wide:active {
  transform: translateY(1px);
  filter: brightness(0.9);
}

.key-wide:focus-visible {
  filter: brightness(1.4);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.form-submit {
  align-self: flex-start;
}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 960px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .games-grid {
    grid-template-columns: 1fr;
  }

  .nav {
    padding: var(--space-2) var(--space-4);
  }

  .page {
    padding: 0 var(--space-4) var(--space-12);
  }

  .hero {
    padding: var(--space-12) 0 var(--space-8);
  }

  .admin-row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
  }

  .row-thumb {
    width: 72px;
  }

  .row-url {
    display: none;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ==========================================
   Reduced motion
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .game-card,
  .login-box {
    animation: none;
  }
}