/* Shared game screen: one centered column, character as the big tap target, main button, option pills below.
   Each game sets --accent (title, focus rings) and the --pill-* colors in its own style.css. */
:root { --accent: var(--hot-ink); }
html, body { height: 100%; }
body { transition: background .3s; -webkit-tap-highlight-color: transparent; }
.app {
  max-width: 480px; margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding-block: 20px; text-align: center;
}
.back { align-self: flex-start; font-weight: 800; color: var(--muted); text-decoration: none; padding: 6px 2px; font-size: .95rem; }
.back:hover { color: var(--fg); }
.back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1 { font-family: var(--display); font-weight: 400; font-size: 2.6rem; margin: 0; letter-spacing: .5px; color: var(--accent); transition: color .3s; }
.status { font-family: var(--display); font-size: 1.7rem; min-height: 2.2em; margin: 0; text-wrap: balance; line-height: 1.1; }
.sub { color: var(--muted); font-weight: 600; margin: -10px 0 0; min-height: 1.4em; text-wrap: balance; }

.main-btn {
  font-family: var(--display); font-size: 1.6rem; letter-spacing: .5px;
  border: 0; border-radius: 999px; padding: 16px 40px; cursor: pointer;
  background: var(--go); color: var(--on-go); box-shadow: 0 5px 0 rgba(0,0,0,.2); text-decoration: none;
}
.main-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.main-btn:focus-visible { outline: 4px solid var(--fg); outline-offset: 3px; }

.opts { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.seg > span { width: 100%; color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.seg button {
  font-family: var(--body); font-weight: 800; font-size: 1rem;
  border: 2px solid var(--pill-line); background: var(--card); color: var(--fg);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--pill-on); border-color: var(--pill-on); color: var(--pill-on-fg); }
.seg button:focus-visible { outline: 3px solid var(--pill-focus); outline-offset: 2px; }
.mode-note { color: var(--muted); font-size: .9rem; margin: -4px 0 0; max-width: 36ch; align-self: center; }
.round { color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; }