/* Typography and palette come from the shared website stylesheet. */
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-size: 1.125rem; }
#game { position: relative; }
canvas { display: block; width: 100%; height: 100%; outline: 0; touch-action: none; }
[hidden] { display: none !important; }
#loading {
  position: absolute;
  inset: 0;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: safe center;
  flex-direction: column;
  padding: 24px;
  overflow: auto;
  text-align: center;
}
#loading > * { flex-shrink: 0; }
#loading p { max-width: 48em; line-height: 1.5; }
button, .actions label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper), var(--ink) 6%);
  color: var(--ink);
  font: inherit;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
button:hover, .actions label:hover { border-color: var(--accent); }
#start, #reload { padding: 12px 40px; background: var(--accent); border-color: var(--accent); color: var(--paper); }
#start:hover, #reload:hover { background: color-mix(in srgb, var(--accent), var(--ink) 12%); }
button:disabled { opacity: .6; cursor: wait; }
button:focus-visible, .actions label:focus-within, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
details { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); width: min(100%, 720px); text-align: left; }
summary { width: fit-content; margin-inline: auto; cursor: pointer; }
summary:hover { color: var(--accent); }
details p { color: var(--muted); font-size: 1rem; }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.actions label { position: relative; }
.actions input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#profile-status:empty { display: none; }
@media (max-width: 520px) {
  .actions { grid-template-columns: 1fr; }
}