/* Shared primitives for the game and the admin page. Every value comes from theme.css. */

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

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

:root[data-theme='dark'] {
  color-scheme: dark;
}

body {
  position: relative;
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

h1,
h2,
h3,
p,
dl,
dd,
ul,
ol,
fieldset {
  margin: 0;
}

ul,
ol,
fieldset {
  padding: 0;
  list-style: none;
}

fieldset {
  min-inline-size: 0;
  border: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-text-link);
}

a:hover {
  color: var(--color-text-link-hover);
}

[hidden] {
  display: none !important;
}

.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  inline-size: var(--size-hairline);
  block-size: var(--size-hairline);
  margin: calc(var(--size-hairline) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  flex: none;
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
}

.icon--xl {
  inline-size: var(--size-icon-xl);
  block-size: var(--size-icon-xl);
  stroke-width: 1.5;
}

/* Type shared by every screen: the wordmark, the display headline, the lead paragraph. */
.wordmark {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--size-tracking-label);
  text-transform: uppercase;
}

.display {
  font-size: clamp(var(--text-4xl), var(--size-display-fluid), var(--text-5xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--size-tracking-display);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.display:focus-visible {
  box-shadow: none;
}

.lead {
  max-inline-size: var(--size-measure);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

/* Focus: one ring everywhere. The transparent outline is what forced-colors mode paints. */
:focus-visible {
  outline: var(--size-stroke) solid transparent;
  box-shadow: var(--shadow-focus-ring);
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-inline-size: 100%;
  min-block-size: var(--size-control-md);
  padding: var(--space-2) var(--space-5);
  border: var(--size-hairline) solid transparent;
  border-radius: var(--radius-button);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
}

.btn--primary:hover {
  background: var(--color-button-primary-bg-hover);
  color: var(--color-button-primary-text);
}

.btn--primary:active {
  background: var(--color-button-primary-bg-active);
}

.btn--secondary {
  background: var(--color-button-secondary-bg);
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
}

.btn--secondary:hover {
  background: var(--color-button-secondary-bg-hover);
  color: var(--color-button-secondary-text);
}

.btn--secondary:active {
  background: var(--color-button-secondary-bg-active);
}

.btn--destructive {
  background: var(--color-button-destructive-bg);
  color: var(--color-button-destructive-text);
}

.btn--destructive:hover {
  background: var(--color-button-destructive-bg-hover);
}

.btn--destructive:active {
  background: var(--color-button-destructive-bg-active);
}

/* For the inverted prize panel: the panel's own text colour becomes the fill. */
.btn--inverse {
  background: var(--color-prize-text);
  color: var(--color-prize-bg);
}

.btn--inverse:hover {
  background: var(--color-prize-muted);
}

.btn--inverse:active {
  background: var(--color-prize-accent);
}

.btn--inverse:focus-visible {
  box-shadow: var(--shadow-focus-ring-inverse);
}

/* Quiet destructive: for a remove action that repeats in every row of a list. */
.btn--destructive-quiet {
  background: transparent;
  border-color: var(--color-action-destructive);
  color: var(--color-action-destructive);
}

.btn--destructive-quiet:hover {
  background: var(--color-feedback-error-bg);
  border-color: var(--color-action-destructive-hover);
  color: var(--color-feedback-error-text);
}

.btn--destructive-quiet:active {
  background: var(--color-feedback-error-bg);
  border-color: var(--color-action-destructive-active);
  box-shadow: inset 0 0 0 var(--size-hairline) var(--color-action-destructive-active);
  color: var(--color-feedback-error-text);
}

.btn--sm {
  min-block-size: var(--size-control-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.btn--block {
  inline-size: 100%;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* Loading is not disabled: full strength, the icon turns into a spinner. */
.btn[aria-busy='true'] {
  pointer-events: none;
}

.spin {
  animation: spin var(--duration-spin) linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Field */
.field {
  display: grid;
  gap: var(--space-1-5);
  min-inline-size: 0;
  align-content: start;
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field__hint {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.field__error {
  display: flex;
  gap: var(--space-1-5);
  align-items: flex-start;
  color: var(--color-feedback-error-text);
  font-size: var(--text-sm);
}

.input {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--size-control-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-input-bg);
  border: var(--size-hairline) solid var(--color-input-border);
  border-radius: var(--radius-input);
  color: var(--color-input-text);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.input::placeholder {
  color: var(--color-input-placeholder);
  opacity: 1;
}

.input:hover {
  border-color: var(--color-input-border-hover);
}

.input:focus-visible {
  border-color: var(--color-input-border-focus);
}

.input[aria-invalid='true'] {
  border-color: var(--color-input-border-error);
}

.input:disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

textarea.input {
  min-block-size: calc(var(--size-control-md) * 2);
  resize: vertical;
}

/* Checkbox with a text label: the label is the hit area. */
.check {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  min-block-size: var(--size-control-md);
  cursor: pointer;
}

.check input {
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
  margin: 0;
  accent-color: var(--color-action-primary);
  cursor: pointer;
}

.check:has(input:disabled) {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* Badge: always an icon or a word, never colour alone. */
.badge {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  background: var(--color-badge-neutral-bg);
  border-radius: var(--radius-badge);
  color: var(--color-badge-neutral-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.badge--success {
  background: var(--color-badge-success-bg);
  color: var(--color-badge-success-text);
}

.badge--warning {
  background: var(--color-badge-warning-bg);
  color: var(--color-badge-warning-text);
}

.badge--error {
  background: var(--color-badge-error-bg);
  color: var(--color-badge-error-text);
}

/* Alert: full hairline border plus icon plus text. */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--color-feedback-error-bg);
  border: var(--size-hairline) solid var(--color-feedback-error-border);
  border-radius: var(--radius-card);
  color: var(--color-feedback-error-text);
  overflow-wrap: anywhere;
}

.alert .icon {
  margin-block-start: var(--space-0-5);
  color: var(--color-feedback-error-icon);
}

.alert--success {
  background: var(--color-feedback-success-bg);
  border-color: var(--color-feedback-success-border);
  color: var(--color-feedback-success-text);
}

.alert--success .icon {
  color: var(--color-feedback-success-icon);
}

.alert ul {
  display: grid;
  gap: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  /* A spinner that stops looks broken, so under reduced motion it pulses in place instead. */
  .spin {
    animation: pulse var(--duration-spin) var(--ease-in-out) infinite alternate !important;
  }
}

@keyframes pulse {
  from {
    opacity: 1;
  }

  to {
    opacity: var(--opacity-disabled);
  }
}