:root {
    --animation-duration: 250ms;
    color-scheme: light;
    font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #151515;
    background: #fff;
}

* { box-sizing: border-box; }

html, body, #app { width: 100%; height: 100%; overflow: hidden; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: .1875rem solid #c5252b;
    outline-offset: .1875rem;
}

body { min-width: 320px; margin: 0; background: #fff; }
.app-shell { position: relative; width: 100%; height: 100%; margin: 0; padding: 16px; overflow: hidden; }
.app-shell--game-ready { display: flex; flex-direction: column; overflow-y: auto; }
.loading { color: #5d5960; }
.loading, .error { margin: 32px auto; text-align: center; }
.error { max-width: 672px; color: #a51d2d; }
.panel { width: 100%; margin: 0 auto 16px; color: #28232d; }
.panel summary { cursor: pointer; font-weight: 650; text-align: center; }
.panel__selection, .panel__new { display: grid; gap: 8px; grid-auto-flow: column; grid-auto-columns: max-content; }
.panel__bar, .panel__controls, .panel__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.panel__bar { justify-content: center; }
.panel__controls { justify-content: center; }
.panel__turn { display: none; }
.panel__controls .form-control { flex: 0 0 auto; }
.panel__actions .form-control { flex: 1 0 auto; }
.panel__selection--selected .panel__actions .form-control { flex: 0 0 auto; }
.panel__selection > select.form-control, .panel__new > input.form-control { width: 100%; }
.panel__selection { grid-template-columns: minmax(0, 1fr); align-items: center; }
.panel__selection--selected { grid-template-columns: minmax(8rem, 1fr) auto; }
.panel__new { grid-template-columns: minmax(0, 1fr) auto; }
.panel__state { margin-top: 16px; }
.form-control, .panel__dump { box-sizing: border-box; min-width: 0; min-height: 32px; height: 32px; border: .0625rem solid #918a96; border-radius: .25rem; padding: 5px 11px; color: inherit; font: inherit; font-weight: 400; background: #fff; }
button.form-control { cursor: pointer; }
a.form-control { display: grid; place-items: center; text-decoration: none; }
button.form-control:active { transform: translateY(.0625rem); background: #f0edf2; }
button.form-control--primary { border-color: #151515; color: #fff; background: #151515; }
button.form-control--primary:active { background: #28232d; }
.form-control--icon { flex: 0 0 32px !important; width: 32px; padding: 3px; font-size: 1rem; line-height: 1; }
.panel__dump { display: block; width: 100%; height: auto; margin-top: 16px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; text-align: left; }
.panel__dump + .panel__controls { margin-top: 8px; }
.panel__message { margin: 16px 0 0; color: #a51d2d; }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(40 35 45 / 28%); }
.modal__dialog { position: relative; width: min(100%, 420px); max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; border: .0625rem solid #918a96; border-radius: .25rem; padding: 24px; color: #28232d; background: #fff; overscroll-behavior: contain; }
.modal__dialog > :not(.modal__close) { margin-bottom: 16px; }
.modal h2 { margin: 0 32px 0 0; font-size: 1.25rem; }
.modal__close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; padding: 0; color: #5d5960; font: 1.5rem/1 Arial, sans-serif; cursor: pointer; background: transparent; }
.player-color-0 { color: #f00; }
.player-color-1 { color: #0088ff; }
.player-color-2 { color: #00aa00; }
.player-color-3 { color: #aa5500; }
.player-color-neutral { color: #151515; }
.player-accent-0 { --player-accent-color: #f00; }
.player-accent-1 { --player-accent-color: #0088ff; }
.player-accent-2 { --player-accent-color: #00aa00; }
.player-accent-3 { --player-accent-color: #aa5500; }
.modal dl { margin: 0; }
.modal dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.modal dt, .modal dd { margin: 0; }
.modal dd { font-variant-numeric: tabular-nums; }
.statistics-controller dt { font-weight: 700; }

.settings-modal__dialog { width: min(100%, 520px); }
.saves-modal__dialog { width: min(100%, 720px); margin: 0; }
.saves-modal .panel__selection { display: flex; flex-wrap: wrap; align-items: center; }
.saves-modal .panel__selection > select.form-control { flex: 1 1 12rem; width: auto; min-width: 12rem; }
.saves-modal .panel__selection .panel__new { flex: 1 1 16rem; min-width: 0; }
.saves-modal .panel__selection .panel__actions { flex: 0 0 auto; min-width: 0; }
.saves-modal .panel__selection--selected .panel__actions .form-control { flex: 0 0 auto; }
.settings-grid, .player-grid { display: grid; gap: 8px; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal label { display: grid; gap: 4px; color: #5d5960; font-size: .875rem; }
.modal label .form-control { width: 100%; color: #28232d; font-size: 1rem; }
.player-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.player-grid label { color: var(--player-accent-color); }
.modal__toggle { display: flex !important; align-items: center; gap: 8px; color: #28232d !important; font-size: 1rem !important; }
.modal__toggle input { inline-size: 1rem; block-size: 1rem; margin: 0; accent-color: #8822bb; }

@media (hover: hover) {
    button.form-control:hover { border-color: #5d5960; background: #f8f6f9; box-shadow: 0 .0625rem .1875rem rgb(40 35 45 / 14%); }
    button.form-control--primary:hover { border-color: #151515; background: #28232d; }
}

@media (max-width: 600px) {
    .panel__new { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 400px) {
    .panel__selection--selected { grid-template-columns: minmax(0, 1fr); }
    .saves-modal .panel__selection > select.form-control { flex-basis: 100%; width: 100%; }
    .saves-modal .panel__selection .panel__new { flex-basis: 100%; }
    .saves-modal .panel__selection .panel__actions { flex-basis: 100%; }
}


@media (max-width: 400px) {
    .settings-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1240px) {
    .panel { position: relative; z-index: 1; }
    .panel__bar { flex-wrap: nowrap; align-items: center; }
    .panel__bar .panel__controls { flex: 0 0 auto; }
    .panel__turn { display: flex; flex: 1 1 0; align-items: center; gap: 8px; font-size: clamp(1.125rem, 3vw, 1.5rem); font-variant-numeric: tabular-nums; }
    .panel__turn--left { justify-content: flex-start; }
    .panel__turn--right { justify-content: flex-end; }
}