.home { gap: 14px; }

.top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.now { display: flex; flex-direction: column; min-width: 0; }
.now b { font-size: 22px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.now small { color: var(--muted); font-size: 12px; }
.top-row .account { flex: none; }

.playtime ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.playtime li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; background: var(--panel); border-radius: 6px; font-variant-numeric: tabular-nums; }
.playtime #playTotal { color: var(--sun); letter-spacing: 0; text-transform: none; }

.signature-wrap { display: flex; justify-content: center; padding: 8px 0 60px; }
.signature { width: 210px; height: auto; transform: rotate(-3deg); }
.signature text {
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", "Dancing Script", cursive;
  font-size: 58px;
  font-weight: 700;
  fill: var(--sun);
}
.signature .initial { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 60px; font-weight: 400; }
.signature path { stroke: var(--sun); stroke-width: 2.5; stroke-linecap: round; }
.home .tagline { margin-bottom: 10px; }

.arcade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arcade-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
}
.arcade-card:hover, .arcade-card:focus-visible { border-color: var(--sun); outline: none; }
.arcade-card:active { transform: translateY(1px); }
.arcade-card .tile { display: block; width: 100%; height: auto; border-radius: 7px; margin-bottom: 6px; }
.arcade-card b { font-size: 16px; font-weight: 900; font-style: italic; line-height: 1.15; }
.arcade-card small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.arcade-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: calc(50% - 9px) 1fr;
  column-gap: 12px;
  align-content: center;
}
.arcade-card:last-child:nth-child(odd) .tile { grid-row: span 2; margin-bottom: 0; }
.arcade-card:last-child:nth-child(odd) b { align-self: end; }

.game-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 12px;
}
.game-card:hover, .game-card:focus-visible { border-color: var(--sun); outline: none; }
.game-card:active { transform: translateY(1px); }

.art {
  flex: none;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 8px;
}
.chess-art {
  padding: 10px;
  background: conic-gradient(#a8744f 25%, #ecdcbc 0 50%, #a8744f 0 75%, #ecdcbc 0) 0 0 / 48px 48px;
}
.chess-art svg { display: block; width: 100%; height: 100%; }

.text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.text b { font-size: 24px; font-weight: 900; font-style: italic; line-height: 1.1; }
.text small { color: var(--muted); font-size: 14px; }

.badge { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; padding: 10px 12px; background: var(--panel); border-radius: 8px; }
.badge b { align-self: flex-start; font-size: 20px; font-weight: 900; font-style: italic; }
.badge small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.progress { height: 7px; margin-top: 5px; overflow: hidden; background: var(--line); border-radius: 4px; }
.progress i { display: block; width: 0; height: 100%; background: var(--sun); border-radius: 4px; }

.chat-fab {
  position: fixed;
  z-index: 20;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--hot);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.chat-fab:active { transform: translateY(1px); }
.chat-fab:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.chat-fab svg { display: block; width: 32px; height: 32px; }

.profile-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }