:root {
  --page-bg: #f6efe5;
  --site-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.92), transparent 34rem),
    linear-gradient(145deg, #f8f3ea, #eef3ef 78%);
  --site-texture:
    radial-gradient(circle at 90% 18%, rgba(15, 118, 110, 0.08), transparent 18rem),
    radial-gradient(circle at 10% 92%, rgba(111, 91, 69, 0.08), transparent 20rem);
  --stage-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(249, 239, 224, 0.86)),
    repeating-linear-gradient(90deg, rgba(88, 67, 42, 0.035) 0 1px, transparent 1px 28px);
  --stage-scene: none;
  --stage-hud-text: #241d18;
  --stage-hud-muted: rgba(36, 29, 24, 0.72);
  --stage-hud-shadow: 0 2px 10px rgba(255, 255, 255, 0.72);
  --card-bg: rgba(255, 250, 243, 0.84);
  --strip-bg: rgba(255, 255, 255, 0.45);
  --button-bg: #ffffff;
  --history-item-bg: rgba(255, 255, 255, 0.72);
  --select-menu-bg: #ffffff;
  --select-menu-text: #231f20;
  --panel-bg: #fffaf3;
  --panel-strong: #ffffff;
  --text: #231f20;
  --muted: #6f665e;
  --border: #e5d8c8;
  --accent: #176b63;
  --accent-dark: #0d514b;
  --accent-soft: #dcefeb;
  --die-size: clamp(58px, calc((100vw - 96px) / 6), 128px);
  --die-gap: clamp(7px, 1.5vw, 18px);
  --die-radius: 16%;
  --die-light: #ffffff;
  --die-highlight: #ffffff;
  --die-front: #fff8e8;
  --die-edge: #e8d9bd;
  --die-side: #eee1ca;
  --pip-color: #171717;
  --pip-rim: #141414;
  --pip-rim-light: #6b6b6b;
  --pip-rim-dark: #050505;
  --pip-shadow: #090909;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 300px;
  background: var(--site-bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--site-texture);
  opacity: 1;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  position: relative;
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 32px 0;
}

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.hero-copy {
  min-width: 0;
}

.language-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.language-control .select-control {
  min-width: 132px;
  min-height: 38px;
}

.badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid rgba(23, 107, 99, 0.22);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 720px;
  margin-bottom: 10px;
  font-size: clamp(2.25rem, 6vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.hero p {
  max-width: 620px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  line-height: 1.55;
}

.roll-card,
.settings-card,
.history-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: 0 20px 60px rgba(61, 48, 34, 0.11);
  backdrop-filter: blur(10px);
}

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.roller-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.roll-card {
  align-self: start;
  overflow: hidden;
}

.dice-stage {
  position: relative;
  height: clamp(340px, 55vw, 660px);
  min-height: 220px;
  max-height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(24px, 6vw, 58px) clamp(10px, 3vw, 32px);
  background: var(--stage-scene), var(--stage-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  perspective: 900px;
}

.dice-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border-radius: 0;
}

.dice-stage:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border-radius: 0;
}

.dice-stage.is-fallback-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  max-height: none;
  border-radius: 0;
  padding: clamp(20px, 4vw, 44px);
}

html.stage-fallback-fullscreen-active,
body.stage-fallback-fullscreen-active {
  background: var(--stage-scene), var(--stage-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html.stage-fallback-fullscreen-active,
body.stage-fallback-fullscreen-active {
  overflow: hidden;
}

.dice-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.dice-row {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--die-gap);
  transform-style: preserve-3d;
}

.dice-row[data-count="1"],
.dice-row[data-count="2"],
.dice-row[data-count="3"] {
  --die-size: min(128px, calc(100% / 3 - var(--die-gap)));
}

.dice-row[data-count="4"] {
  --die-size: min(116px, calc(100% / 4 - var(--die-gap)));
}

.dice-row[data-count="5"] {
  --die-size: min(106px, calc(100% / 5 - var(--die-gap)));
}

.dice-row[data-count="6"] {
  --die-size: min(96px, calc(100% / 6 - var(--die-gap)));
}

.die-wrap {
  width: var(--die-size);
  height: var(--die-size);
  position: relative;
  flex: 0 0 var(--die-size);
  transform-style: preserve-3d;
  filter: drop-shadow(12px 18px 18px rgba(68, 52, 33, 0.25));
}

.die-wrap::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 0;
  bottom: -6%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(45, 36, 25, 0.28), rgba(45, 36, 25, 0));
  transform: skewX(-12deg);
  z-index: -1;
}

.die {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: center;
  transform: rotateZ(-3deg);
  transition: transform 180ms ease, filter 180ms ease;
}

.die.is-rolling {
  animation: tumble 800ms cubic-bezier(0.2, 0.74, 0.24, 1);
}

.die-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.model-face {
  stroke: rgba(255, 255, 255, 0.11);
  stroke-width: 0.35;
}

.model-front {
  filter: drop-shadow(0 0.8px 0 rgba(255, 255, 255, 0.24));
}

.model-gloss {
  mix-blend-mode: screen;
  opacity: 0.82;
  pointer-events: none;
}

.model-pip {
  opacity: 0.98;
}

.model-pip-core {
  filter: drop-shadow(0 1px 1.6px rgba(20, 20, 20, 0.24));
}

.model-pip-right {
  opacity: 0.72;
}

.model-pip-top {
  opacity: 0.9;
}

.values-line {
  margin: 4px 0 0;
  color: var(--stage-hud-text);
  font-size: clamp(1.15rem, 4vw, 1.55rem);
  font-weight: 800;
  text-shadow: var(--stage-hud-shadow);
}

.stage-values {
  position: absolute;
  left: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 2;
  pointer-events: none;
}

.stage-values .eyebrow {
  color: var(--stage-hud-muted);
  text-shadow: var(--stage-hud-shadow);
}

.stage-total {
  position: absolute;
  top: clamp(14px, 2.4vw, 26px);
  right: clamp(14px, 2.4vw, 28px);
  z-index: 2;
  min-width: 108px;
  text-align: right;
  pointer-events: none;
}

.stage-total span {
  display: block;
  color: var(--stage-hud-muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: var(--stage-hud-shadow);
}

.stage-total strong {
  display: block;
  color: var(--stage-hud-text);
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 0.95;
  text-shadow: var(--stage-hud-shadow);
}

.stage-icon-button {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 250, 240, 0.64);
  border-radius: 50%;
  background: rgba(8, 15, 18, 0.42);
  color: #fffaf0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px);
}

.stage-icon-button:hover {
  background: rgba(8, 15, 18, 0.62);
}

.stage-icon-button svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.fullscreen-button {
  top: clamp(12px, 2vw, 22px);
  left: clamp(12px, 2vw, 22px);
}

.dice-stage.is-fallback-fullscreen .fullscreen-button {
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
}

.fullscreen-button .fullscreen-collapse-icon {
  display: none;
}

.fullscreen-button.is-fullscreen .fullscreen-expand-icon {
  display: none;
}

.fullscreen-button.is-fullscreen .fullscreen-collapse-icon {
  display: block;
}

.roll-button {
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 26px);
  width: 58px;
  height: 58px;
  border-color: rgba(255, 250, 240, 0.24);
  background: var(--accent);
  color: #fff;
}

.roll-button:hover {
  background: var(--accent-dark);
}

.roll-shortcut-hint {
  position: absolute;
  right: clamp(82px, 8.4vw, 104px);
  bottom: clamp(27px, 3.5vw, 41px);
  z-index: 2;
  max-width: min(220px, calc(100% - 150px));
  margin: 0;
  color: var(--stage-hud-muted);
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
  text-shadow: var(--stage-hud-shadow);
  pointer-events: none;
}

.dice-stage.is-fallback-fullscreen .roll-shortcut-hint {
  right: max(82px, calc(env(safe-area-inset-right) + 82px));
  bottom: max(27px, calc(env(safe-area-inset-bottom) + 27px));
}

.stage-values[hidden],
.stage-total[hidden] {
  display: none;
}

.secondary-button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  font-weight: 850;
}

.secondary-button {
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--button-bg);
  color: var(--accent-dark);
}

.settings-card {
  padding: 22px;
}

.settings-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 18px;
}

.settings-card h2,
.history-card h2 {
  margin-bottom: 18px;
  font-size: 1.35rem;
}

fieldset {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

legend {
  margin-bottom: 9px;
  color: var(--text);
  font-weight: 850;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.segmented-control.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented-control.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-control label,
.preset-grid label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--muted);
  font-weight: 800;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.segmented-control label:hover,
.preset-grid label:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  transform: translateY(-1px);
}

.segmented-control input,
.preset-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control label:has(input:checked),
.preset-grid label:has(input:checked) {
  border-color: rgba(23, 107, 99, 0.58);
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px rgba(23, 107, 99, 0.1);
}

.segmented-control label:focus-within,
.preset-grid label:focus-within,
button:focus-visible,
.range-control:focus-visible,
.select-control:focus-visible,
.select-wrap:focus-within {
  outline: 3px solid rgba(23, 107, 99, 0.28);
  outline-offset: 2px;
}

.range-setting {
  margin-bottom: 20px;
}

.range-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.range-meta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.range-meta output {
  min-width: 48px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--accent-dark);
  text-align: center;
  font-size: 0.88rem;
  font-weight: 850;
}

.range-control {
  width: 100%;
  height: 28px;
  accent-color: var(--accent);
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.preset-grid label {
  min-height: 54px;
  padding: 0;
  font-size: 0.92rem;
}

.preset-grid .preset-sample {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.shape-icon {
  width: 28px;
  height: 28px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.select-wrap {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 8px;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--accent-dark);
  pointer-events: none;
  transform: translateY(-66%) rotate(45deg);
}

.select-wrap:hover .select-control {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 8px 18px rgba(33, 25, 18, 0.08);
}

.select-wrap.compact {
  display: inline-block;
  width: auto;
}

.select-control {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
  cursor: pointer;
  font-weight: 760;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.select-control:focus {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
}

.select-control:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.select-control option {
  background: var(--select-menu-bg);
  color: var(--select-menu-text);
}

.toggle-grid {
  display: grid;
  gap: 8px;
}

.toggle-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--text);
  font-weight: 800;
}

.toggle-grid input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  order: 2;
}

.preset-sample {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 7px;
  box-shadow: inset -4px -5px 9px rgba(0, 0, 0, 0.13), inset 4px 4px 8px rgba(255, 255, 255, 0.42);
}

.preset-sample::before,
.preset-sample::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sample-pip);
  box-shadow: 13px 0 0 var(--sample-pip), 0 0 0 1px rgba(0, 0, 0, 0.08);
  position: absolute;
}

.preset-sample span {
  display: none;
}

.preset-sample::before {
  left: 8px;
  top: 8px;
}

.preset-sample::after {
  left: 8px;
  bottom: 8px;
}

.white-black {
  --sample-pip: #171717;
  background: #f7f8fa;
}

.red-white {
  --sample-pip: #ffffff;
  background: #e11818;
}

.ivory-black {
  --sample-pip: #171717;
  background: #e5c98a;
}

.black-white {
  --sample-pip: #ffffff;
  background: #11151a;
}

.blue-yellow {
  --sample-pip: #ffd32a;
  background: #003d99;
}

.green-white {
  --sample-pip: #ffffff;
  background: #005426;
}

.history-card {
  margin-top: 22px;
  padding: 22px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.section-heading h2 {
  margin-bottom: 0;
}

.history-controls,
.pagination-controls,
.page-size-control {
  display: flex;
  align-items: center;
}

.history-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.page-size-control {
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.page-size-control .select-control {
  width: auto;
  min-width: 78px;
  min-height: 40px;
}

.pagination-controls {
  gap: 8px;
}

.pagination-controls[hidden] {
  display: none;
}

.pagination-controls .secondary-button {
  min-height: 40px;
}

.page-status {
  min-width: 92px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--history-item-bg);
}

.history-values {
  font-weight: 850;
}

.history-time {
  color: var(--muted);
  font-size: 0.9rem;
}

.history-total {
  min-width: 54px;
  text-align: right;
  color: var(--accent-dark);
  font-size: 1.25rem;
  font-weight: 900;
}

.empty-state {
  margin: 0;
  color: var(--muted);
}

body[data-dice-preset="white-black"] {
  --die-light: #ffffff;
  --die-highlight: #ffffff;
  --die-front: #ffffff;
  --die-edge: #d8dce2;
  --die-side: #eef0f2;
  --pip-color: #050505;
  --pip-rim: #000000;
  --pip-rim-light: #565656;
  --pip-rim-dark: #000000;
  --pip-shadow: #050505;
}

body[data-dice-preset="black-white"] {
  --die-light: #323842;
  --die-highlight: #535b66;
  --die-front: #05070a;
  --die-edge: #000000;
  --die-side: #171b20;
  --pip-color: #f4f2ec;
  --pip-rim: #bfc1bc;
  --pip-rim-light: #ffffff;
  --pip-rim-dark: #80827e;
  --pip-shadow: #c7c9c4;
}

body[data-dice-preset="ivory-black"] {
  --die-light: #f1dba7;
  --die-highlight: #ffe9b8;
  --die-front: #d8bd80;
  --die-edge: #b99b5c;
  --die-side: #e4c98b;
  --pip-color: #090909;
  --pip-rim: #000000;
  --pip-rim-light: #565656;
  --pip-rim-dark: #000000;
  --pip-shadow: #050505;
}

body[data-dice-preset="red-white"] {
  --die-light: #ff7474;
  --die-highlight: #ff9a9a;
  --die-front: #f32020;
  --die-edge: #bd0808;
  --die-side: #ff5f5f;
  --pip-color: #f5f3ee;
  --pip-rim: #cfd0ca;
  --pip-rim-light: #ffffff;
  --pip-rim-dark: #8f918b;
  --pip-shadow: #c4c6c0;
}

body[data-dice-preset="blue-yellow"] {
  --die-light: #1c65bf;
  --die-highlight: #4e90df;
  --die-front: #003d99;
  --die-edge: #00265f;
  --die-side: #064faa;
  --pip-color: #ffd32a;
  --pip-rim: #b98400;
  --pip-rim-light: #fff2a3;
  --pip-rim-dark: #705100;
  --pip-shadow: #d7a800;
}

body[data-dice-preset="green-white"] {
  --die-light: #1e8f49;
  --die-highlight: #4eb56f;
  --die-front: #005426;
  --die-edge: #003317;
  --die-side: #0c6f34;
  --pip-color: #f4f2ec;
  --pip-rim: #bfc1bc;
  --pip-rim-light: #ffffff;
  --pip-rim-dark: #80827e;
  --pip-shadow: #c7c9c4;
}

body[data-shape="square"] {
  --die-radius: 7%;
}

body[data-shape="soft-rounded"] {
  --die-radius: 28%;
}

body[data-background="neutral-light"] {
  --page-bg: #f8f3ea;
  --text: #231f20;
  --muted: #6f665e;
  --border: #e5d8c8;
  --accent: #176b63;
  --accent-dark: #0d514b;
  --accent-soft: #dcefeb;
  --card-bg: rgba(255, 250, 243, 0.84);
  --strip-bg: rgba(255, 255, 255, 0.45);
  --button-bg: #ffffff;
  --history-item-bg: rgba(255, 255, 255, 0.72);
  --select-menu-bg: #ffffff;
  --select-menu-text: #231f20;
  --site-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.92), transparent 34rem),
    linear-gradient(145deg, #f8f3ea, #eef3ef 78%);
  --site-texture:
    radial-gradient(circle at 88% 22%, rgba(15, 118, 110, 0.08), transparent 18rem),
    radial-gradient(circle at 12% 88%, rgba(111, 91, 69, 0.08), transparent 20rem),
    repeating-linear-gradient(45deg, rgba(215, 198, 179, 0.08) 0 1px, transparent 1px 18px);
  --stage-bg:
    radial-gradient(circle at 55% 40%, rgba(255, 255, 255, 0.62), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(249, 239, 224, 0.86)),
    repeating-linear-gradient(90deg, rgba(88, 67, 42, 0.035) 0 1px, transparent 1px 28px);
  --stage-scene: none;
  color-scheme: light;
}

body[data-background="morning-table"] {
  --page-bg: #f4e2c8;
  --text: #241d18;
  --muted: #755f49;
  --border: #ddc5a5;
  --accent: #2f7a63;
  --accent-dark: #1d5c49;
  --accent-soft: #dbeee3;
  --card-bg: rgba(255, 249, 238, 0.84);
  --strip-bg: rgba(255, 253, 247, 0.5);
  --button-bg: #fffdf8;
  --history-item-bg: rgba(255, 253, 247, 0.74);
  --select-menu-bg: #fffdf8;
  --select-menu-text: #241d18;
  --site-bg:
    linear-gradient(90deg, rgba(255, 255, 255, 0.76), transparent 34%),
    repeating-linear-gradient(90deg, rgba(105, 71, 38, 0.1) 0 2px, transparent 2px 72px),
    linear-gradient(140deg, #f9ebd2, #e0b987 68%, #bed8bc);
  --site-texture:
    radial-gradient(ellipse at 8% 75%, rgba(85, 132, 83, 0.18), transparent 10rem),
    radial-gradient(ellipse at 86% 15%, rgba(129, 91, 47, 0.15), transparent 15rem),
    linear-gradient(18deg, transparent 58%, rgba(77, 116, 89, 0.1) 58% 61%, transparent 61%);
  --stage-bg:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.46), transparent 18rem),
    repeating-linear-gradient(90deg, rgba(94, 63, 34, 0.1) 0 2px, transparent 2px 62px),
    linear-gradient(180deg, rgba(255, 244, 226, 0.9), rgba(226, 191, 143, 0.9));
  --stage-scene:
    linear-gradient(180deg, rgba(255, 246, 230, 0.1), rgba(255, 246, 230, 0.22)),
    url("assets/backgrounds/morning-game-table.png");
  color-scheme: light;
}

body[data-background="parchment"] {
  --page-bg: #ead8b1;
  --text: #2c2115;
  --muted: #705b3d;
  --border: #cfb88d;
  --accent: #7c4f22;
  --accent-dark: #573514;
  --accent-soft: #eadcc0;
  --card-bg: rgba(255, 246, 223, 0.84);
  --strip-bg: rgba(255, 248, 230, 0.54);
  --button-bg: #fff7df;
  --history-item-bg: rgba(255, 248, 230, 0.72);
  --select-menu-bg: #fff7df;
  --select-menu-text: #2c2115;
  --site-bg:
    radial-gradient(circle at 70% 20%, rgba(110, 70, 28, 0.12), transparent 14rem),
    linear-gradient(145deg, #f2dfb8, #d9bd83 82%);
  --site-texture:
    repeating-linear-gradient(8deg, rgba(89, 58, 27, 0.08) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 9% 12%, transparent 0 3rem, rgba(88, 54, 24, 0.12) 3.05rem 3.14rem, transparent 3.18rem),
    radial-gradient(circle at 88% 88%, rgba(165, 112, 39, 0.16), transparent 7rem);
  --stage-bg:
    radial-gradient(circle at 75% 25%, rgba(99, 61, 24, 0.08), transparent 11rem),
    repeating-linear-gradient(30deg, rgba(88, 54, 24, 0.045) 0 1px, transparent 1px 32px),
    linear-gradient(180deg, rgba(255, 238, 196, 0.92), rgba(224, 194, 139, 0.88));
  --stage-scene:
    linear-gradient(180deg, rgba(255, 238, 196, 0.08), rgba(103, 64, 28, 0.1)),
    url("assets/backgrounds/fantasy-parchment.png");
  color-scheme: light;
}

body[data-background="minimal-desk"] {
  --page-bg: #f3f6f5;
  --text: #1f2528;
  --muted: #627074;
  --border: #d5dedc;
  --accent: #168178;
  --accent-dark: #0f5d57;
  --accent-soft: #d9efec;
  --card-bg: rgba(255, 255, 255, 0.82);
  --strip-bg: rgba(255, 255, 255, 0.56);
  --button-bg: #ffffff;
  --history-item-bg: rgba(255, 255, 255, 0.72);
  --select-menu-bg: #ffffff;
  --select-menu-text: #1f2528;
  --site-bg:
    radial-gradient(circle at 18% 18%, rgba(22, 129, 120, 0.12), transparent 18rem),
    linear-gradient(145deg, #fbfcfc, #e7eeec);
  --site-texture:
    repeating-linear-gradient(0deg, rgba(48, 66, 69, 0.045) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(48, 66, 69, 0.035) 0 1px, transparent 1px 26px),
    radial-gradient(ellipse at 88% 22%, rgba(44, 156, 146, 0.12), transparent 10rem);
  --stage-bg:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.68), transparent 18rem),
    repeating-linear-gradient(90deg, rgba(40, 62, 65, 0.035) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, rgba(253, 254, 254, 0.9), rgba(232, 238, 236, 0.9));
  --stage-scene:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(232, 244, 242, 0.18)),
    url("assets/backgrounds/minimal-gaming-desk.png");
  color-scheme: light;
}

body[data-background="casino"] {
  --page-bg: #071912;
  --text: #f8f0df;
  --muted: #c9bca4;
  --border: #375341;
  --accent: #d5aa48;
  --accent-dark: #f1cf78;
  --accent-soft: rgba(213, 170, 72, 0.18);
  --card-bg: rgba(8, 22, 16, 0.84);
  --strip-bg: rgba(5, 16, 12, 0.6);
  --button-bg: rgba(255, 248, 232, 0.08);
  --history-item-bg: rgba(255, 248, 232, 0.08);
  --select-menu-bg: #102419;
  --select-menu-text: #f8f0df;
  --stage-hud-text: #fffaf0;
  --stage-hud-muted: rgba(255, 250, 240, 0.84);
  --stage-hud-shadow: 0 3px 14px rgba(0, 0, 0, 0.62);
  --site-bg:
    radial-gradient(circle at 50% 18%, rgba(233, 202, 117, 0.18), transparent 24rem),
    linear-gradient(145deg, #06150f, #0c2a1d 66%, #160b0d);
  --site-texture:
    radial-gradient(circle at 8% 82%, rgba(124, 18, 34, 0.24), transparent 9rem),
    radial-gradient(circle at 90% 78%, rgba(213, 170, 72, 0.2), transparent 8rem),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 18px);
  --stage-bg:
    radial-gradient(circle at 50% 36%, rgba(228, 202, 131, 0.14), transparent 16rem),
    linear-gradient(180deg, rgba(12, 58, 40, 0.96), rgba(4, 28, 20, 0.94)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 12px);
  --stage-scene:
    linear-gradient(180deg, rgba(2, 16, 10, 0.12), rgba(2, 12, 8, 0.34)),
    url("assets/backgrounds/casino-table.png");
  color-scheme: dark;
}

body[data-background="tavern"] {
  --page-bg: #21130c;
  --text: #fff3df;
  --muted: #d1b88f;
  --border: #67472c;
  --accent: #c98232;
  --accent-dark: #ffc46f;
  --accent-soft: rgba(201, 130, 50, 0.18);
  --card-bg: rgba(31, 19, 12, 0.84);
  --strip-bg: rgba(21, 12, 7, 0.56);
  --button-bg: rgba(255, 239, 213, 0.08);
  --history-item-bg: rgba(255, 239, 213, 0.08);
  --select-menu-bg: #2b190f;
  --select-menu-text: #fff3df;
  --stage-hud-text: #fffaf0;
  --stage-hud-muted: rgba(255, 250, 240, 0.84);
  --stage-hud-shadow: 0 3px 14px rgba(0, 0, 0, 0.62);
  --site-bg:
    radial-gradient(circle at 82% 18%, rgba(255, 176, 79, 0.26), transparent 14rem),
    repeating-linear-gradient(90deg, rgba(156, 93, 42, 0.13) 0 3px, transparent 3px 78px),
    linear-gradient(145deg, #170d08, #3a2113 80%);
  --site-texture:
    radial-gradient(ellipse at 8% 85%, rgba(108, 71, 35, 0.32), transparent 12rem),
    radial-gradient(circle at 88% 80%, rgba(170, 103, 38, 0.2), transparent 8rem),
    linear-gradient(30deg, transparent 52%, rgba(255, 210, 132, 0.08) 53%, transparent 56%);
  --stage-bg:
    radial-gradient(circle at 70% 20%, rgba(255, 179, 75, 0.18), transparent 13rem),
    repeating-linear-gradient(90deg, rgba(87, 48, 23, 0.18) 0 3px, transparent 3px 64px),
    linear-gradient(180deg, rgba(77, 43, 22, 0.92), rgba(28, 15, 9, 0.94));
  --stage-scene:
    linear-gradient(180deg, rgba(30, 16, 8, 0.06), rgba(15, 8, 5, 0.28)),
    url("assets/backgrounds/adventurer-table.png");
  color-scheme: dark;
}

body[data-background="neon-room"] {
  --page-bg: #080a1a;
  --text: #f1f7ff;
  --muted: #abb7d2;
  --border: #2a3152;
  --accent: #2dd4bf;
  --accent-dark: #67e8f9;
  --accent-soft: rgba(45, 212, 191, 0.18);
  --card-bg: rgba(9, 13, 31, 0.84);
  --strip-bg: rgba(6, 9, 22, 0.62);
  --button-bg: rgba(239, 246, 255, 0.08);
  --history-item-bg: rgba(239, 246, 255, 0.08);
  --select-menu-bg: #11172d;
  --select-menu-text: #f1f7ff;
  --stage-hud-text: #f7fbff;
  --stage-hud-muted: rgba(247, 251, 255, 0.82);
  --stage-hud-shadow: 0 3px 14px rgba(0, 0, 0, 0.64);
  --site-bg:
    radial-gradient(circle at 20% 18%, rgba(37, 99, 235, 0.34), transparent 20rem),
    radial-gradient(circle at 86% 72%, rgba(45, 212, 191, 0.2), transparent 18rem),
    linear-gradient(145deg, #070817, #15112b 72%, #071923);
  --site-texture:
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.05) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 52% 42%, rgba(45, 212, 191, 0.14), transparent 12rem);
  --stage-bg:
    radial-gradient(circle at 50% 48%, rgba(45, 212, 191, 0.18), transparent 14rem),
    linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(8, 13, 31, 0.95)),
    repeating-linear-gradient(90deg, rgba(96, 165, 250, 0.06) 0 1px, transparent 1px 24px);
  --stage-scene:
    linear-gradient(180deg, rgba(4, 8, 22, 0.06), rgba(3, 6, 18, 0.24)),
    url("assets/backgrounds/neon-game-room.png");
  color-scheme: dark;
}

body[data-background="neutral-dark"] {
  --page-bg: #111827;
  --text: #f5f7fb;
  --muted: #b7c0ce;
  --border: #374151;
  --accent: #2dd4bf;
  --accent-dark: #67e8f9;
  --accent-soft: rgba(45, 212, 191, 0.18);
  --card-bg: rgba(17, 24, 39, 0.84);
  --strip-bg: rgba(9, 14, 24, 0.58);
  --button-bg: rgba(255, 255, 255, 0.08);
  --history-item-bg: rgba(255, 255, 255, 0.08);
  --select-menu-bg: #1f2937;
  --select-menu-text: #f5f7fb;
  --stage-hud-text: #f7fbff;
  --stage-hud-muted: rgba(247, 251, 255, 0.82);
  --stage-hud-shadow: 0 3px 14px rgba(0, 0, 0, 0.64);
  --site-bg:
    radial-gradient(circle at 22% 10%, rgba(45, 212, 191, 0.16), transparent 20rem),
    linear-gradient(145deg, #111827, #1f2937 78%);
  --site-texture:
    repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 85% 72%, rgba(55, 65, 81, 0.45), transparent 18rem);
  --stage-bg:
    radial-gradient(circle at 50% 45%, rgba(45, 212, 191, 0.1), transparent 15rem),
    linear-gradient(180deg, rgba(31, 41, 55, 0.94), rgba(17, 24, 39, 0.94)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 24px);
  --stage-scene: none;
  color-scheme: dark;
}

body[data-background="stone"] {
  --page-bg: #6b665e;
  --text: #fff8ee;
  --muted: #e0d5c7;
  --border: #9a9183;
  --accent: #0f766e;
  --accent-dark: #5eead4;
  --accent-soft: rgba(15, 118, 110, 0.22);
  --card-bg: rgba(67, 63, 57, 0.76);
  --strip-bg: rgba(42, 39, 35, 0.4);
  --button-bg: rgba(255, 249, 239, 0.12);
  --history-item-bg: rgba(255, 249, 239, 0.12);
  --select-menu-bg: #514d46;
  --select-menu-text: #fff8ee;
  --stage-hud-text: #fffaf0;
  --stage-hud-muted: rgba(255, 250, 240, 0.84);
  --stage-hud-shadow: 0 3px 14px rgba(0, 0, 0, 0.62);
  --site-bg:
    radial-gradient(circle at 40% 18%, rgba(184, 171, 155, 0.24), transparent 18rem),
    linear-gradient(145deg, #5c5851, #817a70 74%, #4c4944);
  --site-texture:
    repeating-linear-gradient(18deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 31px),
    repeating-linear-gradient(105deg, rgba(20, 18, 16, 0.06) 0 1px, transparent 1px 43px),
    radial-gradient(circle at 86% 76%, rgba(15, 118, 110, 0.16), transparent 12rem);
  --stage-bg:
    radial-gradient(circle at 50% 42%, rgba(184, 171, 155, 0.18), transparent 15rem),
    linear-gradient(180deg, rgba(129, 122, 112, 0.9), rgba(82, 78, 72, 0.94)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 28px);
  --stage-scene: none;
  color-scheme: dark;
}

@keyframes tumble {
  0% { transform: rotateZ(-3deg) rotateX(0deg) rotateY(0deg); }
  28% { transform: rotateZ(82deg) rotateX(34deg) rotateY(-26deg); }
  56% { transform: rotateZ(176deg) rotateX(-24deg) rotateY(28deg); }
  82% { transform: rotateZ(286deg) rotateX(20deg) rotateY(-18deg); }
  100% { transform: rotateZ(357deg) rotateX(0deg) rotateY(0deg); }
}

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

  .dice-stage {
    height: clamp(300px, 62vw, 520px);
  }
}

@media (max-width: 560px) {
  .app-shell {
    width: min(100% - 18px, 1120px);
    padding: 18px 0;
  }

  .hero {
    align-items: stretch;
    flex-direction: column;
  }

  .language-control {
    justify-content: space-between;
    width: 100%;
  }

  .language-control .select-wrap {
    width: min(180px, 52vw);
  }

  .language-control .select-control {
    min-width: 0;
    width: 100%;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .history-controls,
  .pagination-controls,
  .page-size-control {
    align-items: stretch;
    flex-direction: column;
  }

  .history-controls {
    justify-content: stretch;
  }

  .page-size-control .select-control,
  .pagination-controls .secondary-button {
    width: 100%;
  }

  .page-size-control .select-wrap {
    width: 100%;
  }

  .page-status {
    min-width: 0;
  }

  .secondary-button {
    width: 100%;
  }

  .settings-sections {
    grid-template-columns: 1fr;
  }

  .settings-card,
  .history-card {
    padding: 16px;
  }

  .history-list li {
    grid-template-columns: 1fr;
  }

  .history-total {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}