main { color: var(--ivory); background: #173e31; }
.dice-table { min-height: 36rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; padding-block: 3rem; }
h1 { margin: 0; color: var(--ivory); font-size: clamp(2.3rem, 6vw, 3.5rem); line-height: 1.15; }
.dice-pair { display: flex; gap: clamp(1rem, 4vw, 2rem); }
.dice-pair .die { transition: box-shadow 180ms ease, transform 180ms ease; }
.dice-pair .die.is-pasch { box-shadow: 0 0 0 4px var(--champagne), 0 0 24px 10px rgb(216 194 138 / 75%); transform: scale(1.035); }
.die { width: clamp(6rem, 28vw, 10rem); height: auto; aspect-ratio: 1; background: #fffdf7; border-radius: 16%; fill: #17231d; box-shadow: 0 8px 18px rgb(0 0 0 / 25%); }
.roll-result { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 1rem; }
#sum { font-size: 3.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
#roll-button { width: min(100%, 24rem); min-height: 4rem; margin-top: auto; border: 2px solid transparent; border-radius: .8rem; padding: .8rem 2rem; background: var(--champagne); color: #17231d; font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; }
#roll-button:hover { background: #ead8ae; }
#roll-button:active { background: #c6ac71; }
main :focus-visible { outline: 3px solid var(--ivory); outline-offset: 5px; }
main ::selection { color: #173e31; background: var(--champagne); }

#roll-history { width: min(100%, 24rem); margin: 0; padding: 0; list-style: none; }
#roll-history:empty { display: none; }
#roll-history li { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; border-bottom: 1px solid rgb(255 253 247 / 25%); }
#roll-history .die { width: 2rem; box-shadow: 0 2px 5px rgb(0 0 0 / 20%); }
#roll-history span { margin-left: auto; font-variant-numeric: tabular-nums; }
#roll-history .pasch-badge { color: var(--champagne); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  .dice-pair .die { transition: none; }
}

body { font-size: 16px; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
main { background-color: #173e31; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='felt'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' opacity='.055' filter='url(%23felt)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
/* Keep the thumb area available with all ten history entries. */
.dice-table {
  height: calc(100svh - 6rem - env(safe-area-inset-top));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 1.5rem;
  padding-block: 2rem max(2rem, env(safe-area-inset-bottom));
}
#roll-history { grid-row: 4; min-height: 0; max-height: 100%; overflow-y: auto; align-self: start; scrollbar-color: var(--champagne) #173e31; }
#roll-button { grid-row: 5; margin-top: 0; touch-action: manipulation; }
.dice-footer { grid-row: 6; margin: 0; color: var(--muted); font-size: .875rem; text-align: center; }
.site-footer { padding-bottom: env(safe-area-inset-bottom); }
.brand-tagline, .language-toggle, .account-link, .account-trigger, .account-avatar,
.account-menu-label, .account-menu a, .account-menu button, .footer-layout { font-size: 1rem; }
@media (max-width: 40rem) {
  .dice-table { height: calc(100svh - 5.35rem - env(safe-area-inset-top)); }
  .header-layout .brand { padding-inline: 0; gap: .4rem; }
  .brand-signet { width: 2rem; height: 2rem; }
  .brand-name { font-size: 1rem; }
  .language-toggle { min-width: 44px; }
}