/* Breakpoints 48rem / 30rem are structural CSS constants; media queries cannot use var(). */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-block-start: var(--space-6); }
body { margin: var(--space-0); color: var(--color-text); background: var(--color-bg); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--font-weight-normal); line-height: var(--line-body); overflow-wrap: anywhere; }
[hidden] { display: none !important; }
img { display: block; max-inline-size: var(--width-full); block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, label { -webkit-tap-highlight-color: var(--color-transparent); }
button, a { touch-action: manipulation; }
a { color: var(--color-cream); text-underline-offset: var(--space-1); overflow-wrap: anywhere; }
a:hover { color: var(--color-gold); }
button { cursor: pointer; }
h1, h2, h3, p { margin: var(--space-0); }
h1, h2, h3 { color: var(--color-cream); font-family: var(--font-display); font-weight: var(--font-weight-normal); line-height: var(--line-heading); overflow-wrap: anywhere; }
h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-heading); text-shadow: var(--shadow-heading); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
code { font-family: var(--font-code); overflow-wrap: anywhere; }
:focus-visible, .is-focus { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }
.sr-only { position: absolute; inline-size: var(--size-sr); block-size: var(--size-sr); padding: var(--space-0); margin: var(--space-0); overflow: hidden; clip-path: inset(var(--width-half)); white-space: nowrap; border: var(--space-0); }
.skip-link { position: fixed; inset-block-start: var(--offset-hidden); inset-inline-start: var(--space-5); z-index: var(--z-focus); padding: var(--space-3) var(--space-5); color: var(--color-inverse); background: var(--color-gold); }
.skip-link:focus { inset-block-start: var(--space-5); }
.site { position: relative; isolation: isolate; min-block-size: var(--height-page); display: flex; flex-direction: column; }
.site-art { position: absolute; inset: var(--space-0) var(--space-0) auto; block-size: var(--height-art); z-index: var(--z-art); opacity: var(--opacity-art); overflow: hidden; pointer-events: none; }
.site-art img { inline-size: var(--width-full); block-size: var(--width-full); object-fit: cover; object-position: center top; }
.page-wrap { inline-size: calc(var(--width-full) - var(--space-gutter) * 2); max-inline-size: var(--width-content); margin-inline: auto; min-inline-size: var(--space-0); }
.site-main { flex: var(--flex-grow); padding-block: var(--space-12) var(--space-section); }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-10); padding-block: var(--space-8); }
.site-brand { inline-size: var(--width-logo); max-inline-size: var(--width-full); flex-shrink: var(--space-0); }
.site-brand img { inline-size: var(--width-full); }
.site-menu { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center; }
.site-menu a, .account-link { display: inline-flex; align-items: center; min-block-size: var(--height-target); font-family: var(--font-display); font-size: var(--text-sm); text-decoration: none; }
.header-actions { margin-inline-start: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6); }
.language-switch { display: flex; gap: var(--space-1); margin: var(--space-0); }
.language-switch button { border: var(--space-0); border-block-end: var(--border-control) solid var(--color-transparent); padding: var(--space-2) var(--space-3); min-inline-size: var(--height-target); min-block-size: var(--height-target); color: var(--color-muted); background: var(--color-transparent); font: var(--text-sm) var(--font-display); }
.language-switch button:hover:not(:disabled), .language-switch [aria-current="true"] { color: var(--color-gold); border-block-end-color: var(--color-gold); }
.language-switch button:disabled { color: var(--color-disabled); }
.account-link { color: var(--color-cream); }
.message-area:empty { display: none; }
.message-area { display: grid; gap: var(--space-4); margin-block-end: var(--space-8); }
.site-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-5) var(--space-10); padding-block: var(--space-8); color: var(--color-subtle); font-size: var(--text-sm); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.site-footer a { display: inline-flex; align-items: center; min-block-size: var(--height-target); color: var(--color-muted); }
.eyebrow { color: var(--color-subtle); font: var(--text-label)/var(--line-body) var(--font-display); letter-spacing: var(--tracking-eyebrow); }
.text-accent { color: var(--color-gold); }
.text-muted { color: var(--color-muted); }
.lead { max-inline-size: var(--width-reading); font-size: var(--text-lead); line-height: var(--line-body); color: var(--color-muted); }

/* Buttons. The label backing keeps cream text legible over the original wood texture. */
.button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); max-inline-size: var(--width-full); min-inline-size: min(var(--button-min), var(--width-full)); min-block-size: var(--height-target); border: var(--border-control) solid var(--color-transparent); border-radius: var(--radius-none); padding: var(--space-3) var(--space-5); font-family: var(--font-display); font-size: var(--text-button); font-weight: var(--font-weight-normal); line-height: var(--line-control); text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: color var(--duration-fast) var(--ease-ui), background-color var(--duration-fast) var(--ease-ui), box-shadow var(--duration-fast) var(--ease-ui); }
.button--primary { min-block-size: var(--height-button); padding-inline: var(--space-6); color: var(--color-wood-label); background: var(--image-button) center / var(--width-full) var(--width-full) no-repeat; border: var(--space-0); text-shadow: var(--shadow-button-text); }
.button--primary::before { content: ""; position: absolute; inset: var(--space-0); z-index: var(--z-art); background: var(--image-button-hover) center / var(--width-full) var(--width-full) no-repeat; opacity: var(--opacity-hidden); transition: opacity var(--duration-fast) var(--ease-ui); }
.button--primary .button__label { position: relative; padding: var(--space-0) var(--button-label-inset); background: var(--color-wood-backdrop); box-shadow: var(--shadow-wood-label); }
.button--primary:is(:hover, .is-hover):not(:disabled):not([aria-disabled="true"])::before { opacity: var(--opacity-visible); }
.button--primary:is(:hover, .is-hover):not(:disabled):not([aria-disabled="true"]) { color: var(--color-wood-label); }
.button--secondary { border-color: var(--color-border); background: var(--color-surface-raised); color: var(--color-cream); }
.button--secondary:is(:hover, .is-hover):not(:disabled):not([aria-disabled="true"]) { background: var(--color-surface-hover); border-color: var(--color-gold); color: var(--color-gold); }
.button--text { background: var(--color-transparent); color: var(--color-gold); padding-inline: var(--space-2); min-inline-size: var(--space-0); text-decoration: underline; text-underline-offset: var(--space-1); }
.button--text:is(:hover, .is-hover):not(:disabled):not([aria-disabled="true"]) { color: var(--color-cream); box-shadow: var(--shadow-state-hover); }
.button:active:not(:disabled):not([aria-disabled="true"]) { translate: var(--space-0) var(--offset-press); }
.button.is-error { color: var(--color-error); text-decoration: underline; text-decoration-thickness: var(--border-control); text-underline-offset: var(--space-2); }
.button--secondary.is-error { border-color: var(--color-error); }
.button:is(:disabled, [aria-disabled="true"]) { color: var(--color-disabled); text-shadow: none; }
.button--secondary:is(:disabled, [aria-disabled="true"]) { background: var(--color-disabled-bg); border-color: var(--color-border); }
.button--primary:is(:disabled, [aria-disabled="true"])::before { opacity: var(--opacity-hidden); }
.button--wide { inline-size: var(--width-full); }

/* Form controls. Labels, hints and errors stay outside the control. */
.field { display: grid; grid-template-columns: minmax(var(--space-0), var(--ratio-grid)); gap: var(--space-2); min-inline-size: var(--space-0); overflow-wrap: anywhere; }
.field__label, .field-legend { color: var(--color-muted); font: var(--text-label)/var(--line-body) var(--font-display); letter-spacing: var(--tracking-label); }
.field__control { display: block; inline-size: var(--width-full); min-inline-size: var(--space-0); min-block-size: var(--height-control); border: var(--space-0); border-block-end: var(--border-control) solid var(--color-border); border-radius: var(--radius-none); padding: var(--space-3); color: var(--color-cream); background: var(--color-input); font-family: var(--font-body); font-size: var(--text-control); line-height: var(--line-control); transition: background-color var(--duration-fast) var(--ease-ui), border-color var(--duration-fast) var(--ease-ui); }
.field__control::placeholder { color: var(--color-subtle); opacity: var(--opacity-visible); }
.field__control:is(:hover, .is-hover):not(:disabled) { border-block-end-color: var(--color-gold); background: var(--color-surface-hover); }
.field__control:is(:focus-visible, .is-focus):not(:disabled) { border-block-end-color: var(--color-gold); }
.field__control[aria-invalid="true"], .field__control.is-error { border-block-end-color: var(--color-error); }
.field__control:disabled { color: var(--color-disabled); background: var(--color-disabled-bg); }
textarea.field__control { min-block-size: var(--height-textarea); resize: vertical; }
select.field__control { padding-inline-end: var(--space-8); }
select.field__control option { color: var(--color-cream); background: var(--color-input); }
.field__hint { color: var(--color-subtle); font-size: var(--text-sm); line-height: var(--line-body); }
.field__error { color: var(--color-error); font-size: var(--text-sm); line-height: var(--line-body); }
.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); min-block-size: var(--height-target); padding-block: var(--space-2); font-size: var(--text-body); cursor: pointer; }
.checkbox__input { appearance: none; position: relative; flex-shrink: var(--space-0); inline-size: var(--size-checkbox); block-size: var(--size-checkbox); margin: var(--space-1) var(--space-0); border: var(--border-control) solid var(--color-border); border-radius: var(--radius-none); background: var(--color-input); }
.checkbox__input:checked { border-color: var(--color-gold); background: var(--color-gold); }
.checkbox__input:checked::after { content: ""; position: absolute; inset-block-start: var(--space-0); inset-inline-start: var(--space-1); inline-size: var(--size-check-width); block-size: var(--size-check-height); border: solid var(--color-inverse); border-width: var(--space-0) var(--border-control) var(--border-control) var(--space-0); transform: rotate(var(--scale-check)); }
.checkbox:hover .checkbox__input:not(:disabled), .checkbox__input.is-hover:not(:disabled) { border-color: var(--color-gold); }
.checkbox__input[aria-invalid="true"] { border-color: var(--color-error); }
.checkbox__input:disabled { border-color: var(--color-border); background: var(--color-disabled-bg); }
.checkbox__input:disabled:checked::after { border-color: var(--color-disabled); }
.checkbox:has(:disabled) { color: var(--color-disabled); cursor: not-allowed; }
.file-control { inline-size: var(--width-full); min-inline-size: var(--space-0); min-block-size: var(--height-control); padding: var(--space-3); border: var(--border-control) solid var(--color-border); border-radius: var(--radius-none); color: var(--color-text); background: var(--color-input); font-size: var(--text-sm); }
.file-control::file-selector-button { max-inline-size: var(--width-full); min-block-size: var(--height-target); margin-inline-end: var(--space-3); padding: var(--space-2) var(--space-3); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-none); background: var(--color-surface-raised); color: var(--color-cream); font-family: var(--font-body); white-space: normal; cursor: pointer; }
.file-control:is(:hover, .is-hover):not(:disabled), .file-control:is(:hover, .is-hover):not(:disabled)::file-selector-button { border-color: var(--color-gold); background: var(--color-surface-hover); }
.file-control[aria-invalid="true"] { border-color: var(--color-error); }
.file-control:disabled, .file-control:disabled::file-selector-button { color: var(--color-disabled); background: var(--color-disabled-bg); cursor: not-allowed; }
.form-group { border: var(--space-0); padding: var(--space-0); margin: var(--space-0); min-inline-size: var(--space-0); }
.form-group legend { margin-block-end: var(--space-4); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--width-full), var(--width-form-min)), var(--ratio-grid))); gap: var(--space-8); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; margin-block-start: var(--space-8); }

/* Messages are content, not focus targets. Error meaning is also conveyed in text. */
.message { --message-accent: var(--color-muted); padding: var(--space-5) var(--space-6); border-inline-start: var(--border-focus) solid var(--message-accent); background: var(--color-surface); overflow-wrap: anywhere; }
.message--success { --message-accent: var(--color-success); }
.message--warning { --message-accent: var(--color-warning); }
.message--error { --message-accent: var(--color-error); }
.message__title { color: var(--message-accent); font: var(--text-label)/var(--line-body) var(--font-display); margin-block-end: var(--space-2); }
.message p:not(.message__title) { color: var(--color-text); font-size: var(--text-body); }
.message a { color: var(--color-cream); }

/* Open, square-edged cards follow the current game UI; there are no new rounded panels. */
.card { display: flex; flex-direction: column; min-inline-size: var(--space-0); background: var(--color-surface); border-radius: var(--radius-none); overflow-wrap: anywhere; }
.card__image { inline-size: var(--width-full); aspect-ratio: var(--aspect-card); object-fit: cover; object-position: center; }
.card__body { display: grid; gap: var(--space-4); padding: var(--space-6); }
.card__body p { color: var(--color-muted); }
.card:has(a:hover), .card.is-hover { background: var(--color-surface-raised); box-shadow: var(--shadow-card); }
.card:focus-within, .card.is-focus { outline: var(--border-focus) solid var(--color-focus); outline-offset: var(--focus-offset); }
.card.is-disabled, .card.is-disabled .card__body p { color: var(--color-disabled); }
.card.is-error { border-inline-start: var(--border-focus) solid var(--color-error); }
.card.is-error h3 { color: var(--color-error); }

.table { inline-size: var(--width-full); border-collapse: collapse; table-layout: fixed; font-size: var(--text-body); }
.table caption { text-align: start; color: var(--color-cream); font: var(--text-h3)/var(--line-heading) var(--font-display); padding-block-end: var(--space-6); }
.table th, .table td { vertical-align: top; text-align: start; padding: var(--space-5) var(--space-4); border-block-end: var(--border-thin) solid var(--color-divider); overflow-wrap: anywhere; }
.table th { color: var(--color-subtle); font: var(--text-label)/var(--line-body) var(--font-display); }
.table tbody tr:is(:hover, .is-hover) { background: var(--color-surface-hover); }
.table tbody tr:focus-within, .table tbody tr.is-focus { outline: var(--border-focus) solid var(--color-focus); outline-offset: calc(var(--focus-offset) * -1); }
.table tr.is-disabled { color: var(--color-disabled); }
.table tr.is-error { background: var(--color-surface); }
.table__mobile-label { display: none; }
.table .button { font-size: var(--text-sm); padding-inline: var(--space-2); min-inline-size: var(--space-0); }

.status-badge { --badge-accent: var(--color-muted); display: inline-flex; align-items: center; gap: var(--space-2); max-inline-size: var(--width-full); padding: var(--space-2) var(--space-3); color: var(--badge-accent); background: var(--color-input); border-radius: var(--radius-none); font: var(--text-sm)/var(--line-body) var(--font-display); overflow-wrap: anywhere; }
.status-badge::before { content: ""; flex-shrink: var(--space-0); inline-size: var(--size-dot); block-size: var(--size-dot); border-radius: var(--radius-round); background: var(--badge-accent); }
.status-badge--success { --badge-accent: var(--color-success); }
.status-badge--warning { --badge-accent: var(--color-warning); }
.status-badge--error { --badge-accent: var(--color-error); }
.status-badge--disabled { --badge-accent: var(--color-disabled); }
.progress-steps { list-style: none; padding: var(--space-0); margin: var(--space-0); display: grid; grid-template-columns: repeat(3, minmax(var(--space-0), var(--ratio-grid))); gap: var(--space-6); }
.progress-steps li { min-inline-size: var(--space-0); display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-subtle); }
.progress-steps__marker { display: grid; place-items: center; flex-shrink: var(--space-0); inline-size: var(--size-step); block-size: var(--size-step); border: var(--border-control) solid var(--color-border); border-radius: var(--radius-round); font: var(--text-sm) var(--font-display); color: var(--color-muted); }
.progress-steps__copy { padding-block-start: var(--space-2); min-inline-size: var(--space-0); overflow-wrap: anywhere; }
.progress-steps__copy strong { display: block; color: var(--color-text); font: var(--text-label)/var(--line-body) var(--font-display); }
.progress-steps__copy small { display: block; font-size: var(--text-sm); margin-block-start: var(--space-1); }
.progress-steps .is-complete .progress-steps__marker { border-color: var(--color-success); background: var(--color-surface-raised); color: var(--color-success); }
.progress-steps [aria-current="step"] .progress-steps__marker { border-color: var(--color-gold); color: var(--color-gold); }
.progress-steps .is-error .progress-steps__marker, .progress-steps .is-error .progress-steps__copy strong { border-color: var(--color-error); color: var(--color-error); }
.progress-steps .is-disabled { color: var(--color-disabled); }

/* Showcase layout and state labels. is-hover / is-focus reproduce the same CSS as native states. */
.showcase-intro { display: grid; grid-template-columns: var(--grid-intro); align-items: end; gap: var(--space-10); padding-block: var(--space-4) var(--space-8); }
.showcase-intro h1 { font-size: var(--text-showcase-title); }
.showcase-intro .eyebrow { margin-block-end: var(--space-5); }
.showcase-intro .lead { margin-block-start: var(--space-6); }
.showcase-note { color: var(--color-muted); max-inline-size: var(--width-reading); font-size: var(--text-body); }
.showcase-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-block: var(--space-4); border-block: var(--border-thin) solid var(--color-divider); }
.showcase-nav a { display: inline-flex; min-block-size: var(--height-target); align-items: center; font: var(--text-label)/var(--line-body) var(--font-display); text-decoration: none; }
.showcase-section { padding-block-start: var(--space-showcase-section); }
.showcase-section > h2 { margin-block-end: var(--space-5); }
.showcase-section > .showcase-note { margin-block-end: var(--space-8); }
.showcase-subsection { margin-block-start: var(--space-10); }
.showcase-subsection > h3 { margin-block-end: var(--space-6); }
.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--width-full), var(--width-state-min)), var(--ratio-grid))); gap: var(--space-state-gap); align-items: start; }
.state-example { min-inline-size: var(--space-0); }
.state-example > .button { inline-size: var(--width-full); }
.state-label { display: block; font: var(--text-sm)/var(--line-body) var(--font-display); color: var(--color-subtle); margin-block-end: var(--space-4); }
.state-example > .field__error { margin-block-start: var(--space-3); }
.stack { display: grid; gap: var(--space-6); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--width-full), var(--width-card-min)), var(--ratio-grid))); gap: var(--space-8); align-items: start; }
.badge-list { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.progress-example + .progress-example { margin-block-start: var(--space-10); }
.progress-example > h3 { margin-block-end: var(--space-6); }
.preview-status { margin-block-start: var(--space-4); font-size: var(--text-sm); color: var(--color-warning); }
.preview-status:empty { display: none; }
.demo-group { padding-block-start: var(--space-10); }
.demo-group > h3 { margin-block-end: var(--space-6); }

@media (max-width: 48rem) {
  .site-main { padding-block-start: var(--space-6); }
  .site-header { gap: var(--space-4) var(--space-6); padding-block: var(--space-6); }
  .site-menu { order: 3; inline-size: var(--width-full); gap: var(--space-3) var(--space-6); }
  .header-actions { gap: var(--space-4); }
  .site-menu a, .account-link { font-size: var(--text-sm); }
  .showcase-intro { grid-template-columns: minmax(var(--space-0), var(--ratio-grid)); gap: var(--space-6); }
  .progress-steps { grid-template-columns: minmax(var(--space-0), var(--ratio-grid)); }
  .table, .table tbody { display: block; }
  .table caption { display: block; }
  .table thead { position: absolute; inline-size: var(--size-sr); block-size: var(--size-sr); clip-path: inset(var(--width-half)); overflow: hidden; white-space: nowrap; }
  .table tbody tr { display: grid; grid-template-columns: minmax(var(--space-0), var(--ratio-grid)); padding-block: var(--space-4); border-block-end: var(--border-thin) solid var(--color-divider); }
  .table td { display: grid; grid-template-columns: minmax(var(--space-0), var(--ratio-grid)); gap: var(--space-2); border: var(--space-0); padding-block: var(--space-3); }
  .table__mobile-label { display: block; font: var(--text-label)/var(--line-body) var(--font-display); color: var(--color-subtle); }
  .site-footer { align-items: flex-start; }
}
@media (max-width: 30rem) {
  .site-header { align-items: flex-start; }
  .header-actions { margin-inline-start: var(--space-0); flex: var(--flex-grow); justify-content: flex-end; }
  .account-link { inline-size: var(--width-full); justify-content: flex-end; font-size: var(--text-xs); }
  .site-menu { gap: var(--space-2) var(--space-4); }
  .site-menu a { font-size: var(--text-sm); }
  .state-grid { grid-template-columns: minmax(var(--space-0), var(--ratio-grid)); gap: var(--space-8); }
  .form-actions > .button { inline-size: var(--width-full); }
  .message { padding: var(--space-4); }
  .site-footer nav { flex-direction: column; gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: var(--duration-none) !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .button--primary { background: var(--color-forced-bg); color: var(--color-forced-text); border: var(--border-control) solid var(--color-forced-text); text-shadow: none; }
  .button--primary::before { display: none; }
  .button--primary .button__label { background: var(--color-forced-bg); color: var(--color-forced-text); box-shadow: none; }
  .checkbox__input { appearance: auto; }
  .checkbox__input::after { display: none; }
  .site-art { display: none; }
}