:root {
  --background: 39 44% 94%;
  --foreground: 250 29% 19%;
  --border: 37 23% 84%;
  --input: 37 23% 79%;
  --ring: 276 44% 45%;
  --card: 41 45% 97%;
  --card-foreground: 250 29% 19%;
  --card-border: 37 24% 86%;
  --primary: 275 45% 36%;
  --primary-foreground: 42 45% 97%;
  --secondary: 38 36% 89%;
  --secondary-foreground: 250 29% 19%;
  --muted: 39 25% 89%;
  --muted-foreground: 251 13% 45%;
  --accent: 37 90% 55%;
  --accent-foreground: 250 29% 19%;
  --destructive: 7 63% 48%;
  --destructive-foreground: 42 45% 97%;
  --app-font-sans: 'DM Sans', 'Avenir Next', 'Segoe UI', sans-serif;
  --app-font-serif: 'Fraunces', Georgia, serif;
  --app-font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;
  --radius: 1.05rem;
  --ink: #29213f;
  --plum: #5b3a75;
  --deep-plum: #37264e;
  --saffron: #f4ae43;
  --coral: #e66d55;
  --paper: #f7f2e8;
  --paper-deep: #ebe1d1;
  --die-bg: #f8f0df;
  --die-fg: #29213f;
  --die-border: rgba(255,255,255,.58);
  --die-shadow: 0 5px 0 rgba(34,22,50,.18), 0 10px 20px rgba(34,22,50,.13);
  --shadow-ink: 0 18px 45px rgba(62, 43, 88, .12);
  --shadow-soft: 0 8px 22px rgba(62, 43, 88, .08);
}

.dark {
  --background: 250 29% 12%;
  --foreground: 39 44% 94%;
  --border: 252 18% 26%;
  --input: 252 18% 30%;
  --ring: 37 90% 55%;
  --card: 250 24% 17%;
  --card-foreground: 39 44% 94%;
  --card-border: 252 18% 26%;
  --primary: 37 90% 55%;
  --primary-foreground: 250 29% 12%;
  --secondary: 252 18% 24%;
  --secondary-foreground: 39 44% 94%;
  --muted: 252 18% 24%;
  --muted-foreground: 250 12% 70%;
  --accent: 7 63% 58%;
  --accent-foreground: 39 44% 94%;
  --destructive: 7 63% 58%;
  --destructive-foreground: 39 44% 94%;
  --ink: #eee8f5;
  --plum: #d2a6ee;
  --deep-plum: #6f4a8c;
  --saffron: #f4bd52;
  --coral: #ed8268;
  --paper: #1e1a27;
  --paper-deep: #2a2534;
  --die-bg: #2b2535;
  --die-fg: #f3edf8;
  --die-border: rgba(255,255,255,.12);
  --die-shadow: 0 5px 0 rgba(0,0,0,.36), 0 10px 20px rgba(0,0,0,.22);
  --shadow-ink: 0 18px 45px rgba(0,0,0,.32);
  --shadow-soft: 0 8px 22px rgba(0,0,0,.25);
}

@layer base {
  * { border-color: hsl(var(--border)); }
  html { background: var(--paper); }
  body {
    margin: 0;
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--app-font-sans);
    -webkit-font-smoothing: antialiased;
  }
  button, input { font: inherit; }
  button { cursor: pointer; }
}


/* Prevent browser-style long-press text selection throughout the app. */
html, body, body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes roll-die {
  0% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-10px) rotate(7deg); }
  70% { transform: translateY(4px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.app-shell {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 6%, rgba(244, 174, 67, .15), transparent 24rem),
    radial-gradient(circle at -5% 88%, rgba(91, 58, 117, .1), transparent 28rem),
    var(--paper);
}
.app-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.topbar, .page-wrap {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
}
.topbar {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(1.4rem + env(safe-area-inset-top, 0px)) 0 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  color: var(--saffron);
  background: var(--deep-plum);
  border: 3px solid var(--saffron);
  border-radius: .72rem;
  box-shadow: 4px 4px 0 rgba(55, 38, 78, .13);
  transform: rotate(-6deg);
}
.brand-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.035em; }
.brand-subtitle {
  display: block;
  margin-top: .08rem;
  color: var(--muted-foreground);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topbar-action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .66rem .86rem;
  color: var(--plum);
  background: rgba(255, 255, 255, .36);
  border: 1px solid var(--border);
  border-radius: .75rem;
  font-size: .77rem;
  font-weight: 800;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.topbar-action:hover { background: rgba(255,255,255,.7); border-color: rgba(91,58,117,.3); transform: translateY(-2px); }
.page-wrap { padding: 2rem 0 4rem; }
.view-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.view-switcher {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .28rem;
  background: rgba(235, 225, 209, .72);
  border: 1px solid rgba(91, 58, 117, .1);
  border-radius: .9rem;
}
.download-app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: .66rem 1rem;
  color: var(--primary-foreground);
  background: var(--plum);
  border: 1px solid rgba(55,38,78,.18);
  border-radius: .82rem;
  box-shadow: 0 5px 12px rgba(55,38,78,.12);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  touch-action: manipulation;
}
.download-app-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(55,38,78,.16);
}
.download-app-button:active {
  transform: translateY(0);
}

.view-tab {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  padding: .66rem 1rem;
  color: var(--muted-foreground);
  background: transparent;
  border: 0;
  border-radius: .68rem;
  font-size: .82rem;
  font-weight: 800;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.view-tab:hover { color: var(--ink); transform: translateY(-1px); }
.view-tab.is-active { color: var(--ink); background: var(--card); box-shadow: 0 4px 12px rgba(55,38,78,.08); }
.view-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin: 2.5rem 0 1.8rem;
  animation: rise-in .5s ease both;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .85rem;
  color: var(--coral);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 1.5rem; height: 2px; background: var(--coral); }
.view-heading h1 {
  max-width: 660px;
  margin: 0;
  color: var(--ink);
  font-family: var(--app-font-serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -.07em;
  line-height: .95;
}
.view-heading h1 em { color: var(--plum); font-style: normal; }
.view-heading-copy {
  max-width: 360px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: .92rem;
  line-height: 1.65;
}
.roll-layout, .stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 1.25rem;
  animation: rise-in .6s .08s ease both;
}
.roll-stage {
  position: relative;
  display: block;
  width: 100%;
  min-height: 440px;
  padding: clamp(1.5rem, 4vw, 2.7rem);
  overflow: hidden;
  color: #fbf4e8;
  background: linear-gradient(135deg, rgba(244,174,67,.14), transparent 42%), var(--deep-plum);
  border: 0;
  border-radius: 1.55rem;
  box-shadow: var(--shadow-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.roll-stage:hover:not(:disabled) { filter: saturate(1.04); box-shadow: 0 20px 34px rgba(62,43,88,.22); }
.roll-stage:disabled { cursor: wait; }
.stage-content { position: relative; z-index: 1; }
.stage-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(251,244,232,.68);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.session-dot { display: inline-flex; align-items: center; gap: .42rem; }
.session-dot::before {
  content: '';
  width: .42rem;
  height: .42rem;
  background: var(--saffron);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(244,174,67,.12);
}
.stage-result { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 4.5rem 0 2.3rem; }
.stage-result-label { margin: 0 0 .5rem; color: rgba(251,244,232,.65); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.total-number {
  margin: 0;
  color: var(--saffron);
  font-family: var(--app-font-serif);
  font-size: clamp(6rem, 17vw, 10rem);
  font-weight: 700;
  letter-spacing: -.1em;
  line-height: .72;
  text-shadow: 5px 7px 0 rgba(34,22,50,.24);
}
.total-number.is-placeholder { color: rgba(251,244,232,.2); }
.stage-prompt { max-width: 180px; margin: 0 0 .3rem; color: rgba(251,244,232,.67); font-size: .83rem; line-height: 1.5; }
.die-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.die-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--die-fg);
  background: var(--die-bg);
  border: 1px solid var(--die-border);
  border-radius: .82rem;
  box-shadow: var(--die-shadow);
  transition: transform .2s ease;
}
.die-tile:hover { transform: translateY(-4px) rotate(2deg); }
.die-tile.is-rolling { animation: roll-die .48s ease-in-out infinite; will-change: transform; }
.die-pip { position: absolute; width: .43rem; height: .43rem; background: currentColor; border-radius: 50%; }
.pip-center { inset: calc(50% - .215rem); }
.pip-tl { left: .55rem; top: .55rem; }
.pip-tr { right: .55rem; top: .55rem; }
.pip-bl { left: .55rem; bottom: .55rem; }
.pip-br { right: .55rem; bottom: .55rem; }
.pip-ml { left: .55rem; top: calc(50% - .215rem); }
.pip-mr { right: .55rem; top: calc(50% - .215rem); }
.die-tile-small { width: 2.1rem; height: 2.1rem; border-radius: .52rem; box-shadow: 0 3px 0 rgba(34,22,50,.14); }
.die-tile-small .die-pip { width: .3rem; height: .3rem; }
.die-tile-small .pip-center { inset: calc(50% - .15rem); }
.die-tile-small .pip-tl { left: .34rem; top: .34rem; }
.die-tile-small .pip-tr { right: .34rem; top: .34rem; }
.die-tile-small .pip-bl { left: .34rem; bottom: .34rem; }
.die-tile-small .pip-br { right: .34rem; bottom: .34rem; }
.die-tile-small .pip-ml { left: .34rem; top: calc(50% - .15rem); }
.die-tile-small .pip-mr { right: .34rem; top: calc(50% - .15rem); }
.roll-controls { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 1rem; padding: .85rem 1.1rem; background: rgba(255,252,245,.78); border: 1px solid var(--card-border); border-radius: 1rem; box-shadow: 0 6px 16px rgba(62,43,88,.07); }
.dice-control { display: flex; align-items: center; gap: .85rem; }
.dice-control-label { margin-right: .1rem; color: var(--muted-foreground); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.stepper { display: flex; align-items: center; gap: .28rem; padding: .3rem; background: rgba(235,225,209,.62); border: 1px solid var(--border); border-radius: .78rem; }
.stepper button { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--plum); background: transparent; border: 0; border-radius: .5rem; transition: background-color .18s ease, transform .18s ease; }
.stepper button:hover { background: rgba(91,58,117,.1); transform: scale(1.08); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper-value { min-width: 2rem; color: var(--plum); font-family: var(--app-font-mono); font-size: .98rem; font-weight: 700; text-align: center; }
.dice-type { color: var(--muted-foreground); font-size: .73rem; }
.roll-control-hint { color: var(--muted-foreground); font-size: .75rem; }
.side-stack { display: grid; gap: 1.25rem; }
.paper-card, .stat-card {
  padding: 1.45rem;
  background: rgba(255,252,245,.64);
  border: 1px solid var(--card-border);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-soft);
}
.paper-card h2, .stat-card h2 { margin: 0; color: var(--ink); font-size: 1rem; letter-spacing: -.035em; }
.paper-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.paper-card-heading span { color: var(--muted-foreground); font-size: .72rem; font-weight: 800; }
.quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.quick-stat { padding: .9rem; background: rgba(235,225,209,.52); border-radius: .78rem; }
.quick-stat strong { display: block; color: var(--plum); font-family: var(--app-font-serif); font-size: 1.9rem; line-height: 1; }
.quick-stat span { display: block; margin-top: .35rem; color: var(--muted-foreground); font-size: .67rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.history-card { min-height: 180px; }
.history-empty { display: grid; place-items: center; min-height: 125px; padding: .5rem 1rem; color: var(--muted-foreground); text-align: center; }
.history-empty svg { margin-bottom: .65rem; color: var(--coral); }
.history-empty p { max-width: 190px; margin: 0; font-family: var(--app-font-serif); font-size: 1.05rem; line-height: 1.25; }
.history-list { display: grid; gap: .65rem; max-height: 243px; overflow: auto; }
.history-item { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem 0; border-bottom: 1px dashed var(--border); }
.history-item:last-child { border-bottom: 0; }
.history-dice { display: flex; align-items: center; gap: .28rem; min-width: 0; }
.history-dice-more { color: var(--muted-foreground); font-size: .68rem; font-weight: 800; }
.history-total { color: var(--plum); font-family: var(--app-font-mono); font-size: 1rem; font-weight: 800; }
.history-time { margin-top: .18rem; color: var(--muted-foreground); font-size: .64rem; }
.below-grid { display: flex; justify-content: flex-end; gap: 1.25rem; margin-top: 1.25rem; }
.ritual-note { position: relative; padding: 1.45rem 1.6rem; color: #fbf4e8; background: var(--plum); border-radius: 1.2rem; overflow: hidden; }
.ritual-note h2 { position: relative; z-index: 1; margin: 0 0 .45rem; font-family: var(--app-font-serif); font-size: 1.6rem; letter-spacing: -.045em; }
.ritual-note p { position: relative; z-index: 1; max-width: 400px; margin: 0; color: rgba(251,244,232,.7); font-size: .8rem; line-height: 1.55; }
.utility-actions { display: flex; width: min(100%, 28rem); flex-direction: column; justify-content: center; gap: .6rem; }
.text-button { display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; padding: .8rem .85rem; color: var(--plum); background: transparent; border: 1px solid transparent; border-radius: .7rem; font-size: .78rem; font-weight: 800; text-align: left; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.text-button:hover { background: rgba(235,225,209,.7); border-color: var(--border); transform: translateX(3px); }
.text-button.is-danger { color: var(--coral); }
.confirm-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem .85rem; background: rgba(230,109,85,.09); border-radius: .7rem; color: var(--coral); font-size: .74rem; font-weight: 800; }
.confirm-actions { display: flex; gap: .35rem; }
.confirm-actions button { padding: .38rem .55rem; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .4rem; font-size: .68rem; font-weight: 800; }
.stats-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; }
.stats-head .view-heading { margin: 2.5rem 0 0; }
.stats-selects { display: flex; align-items: end; gap: .7rem; }\n.stats-selects { transform: translateX(8px); }
.session-select-wrap { min-width: 190px; }
.field-label { display: block; margin-bottom: .42rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.session-select { width: 100%; padding: .72rem .8rem; color: var(--ink); background: rgba(255,252,245,.72); border: 1px solid var(--border); border-radius: .7rem; outline: none; font-size: .78rem; font-weight: 800; }
.session-select:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(91,58,117,.12); }
.stat-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
.summary-card { position: relative; min-height: 135px; height: 135px; padding: 1.35rem; overflow: hidden; color: #fbf4e8; background: var(--deep-plum); border-radius: 1.15rem; }
.summary-card:nth-child(2) { background: var(--coral); }
.summary-card:nth-child(3) { color: var(--ink); background: var(--saffron); }
.summary-label { position: relative; z-index: 1; margin: 0 0 1.3rem; opacity: .68; font-size: .69rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.summary-value { position: relative; z-index: 1; margin: 0; font-family: var(--app-font-serif); font-size: clamp(1.7rem, 4vw, 3.15rem); letter-spacing: -.06em; line-height: .9; }
.summary-foot { position: relative; z-index: 1; margin: .65rem 0 0; opacity: .72; font-size: .72rem; }
.stats-grid { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
.stat-card { background: rgba(255,252,245,.7); }
.stat-card-intro { margin: .42rem 0 1.6rem; color: var(--muted-foreground); font-size: .76rem; }
.sum-stat { display: grid; grid-template-columns: 2.6rem minmax(90px, 1fr) 2.1rem 3rem; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.sum-stat:last-child { margin-bottom: 0; }
.sum-number { display: grid; place-items: center; min-width: 2.7rem; height: 2.35rem; padding: 0 .35rem; color: #fbf4e8; background: var(--plum); border-radius: .6rem; font-family: var(--app-font-mono); font-weight: 700; }
.face-bar-track { height: .5rem; margin-inline: .35rem; overflow: hidden; background: var(--paper-deep); border-radius: 99px; }
.face-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--plum), var(--saffron)); border-radius: inherit; transition: width .6s cubic-bezier(.22,.8,.2,1); }
.face-count, .face-percent { color: var(--ink); font-family: var(--app-font-mono); font-size: .75rem; font-weight: 800; text-align: right; }
.face-percent { color: var(--muted-foreground); }
.stat-card-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.stat-card-title-row h2 { margin: 0; }
.stat-sort-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -0.65rem 0 1rem; padding: .75rem .9rem; background: rgba(235,225,209,.38); border: 1px solid var(--border); border-radius: .8rem; }
.stat-sort-title { color: var(--ink); font-size: .78rem; font-weight: 900; }
.stat-sort-inline { display: flex; align-items: center; gap: .6rem; min-width: 260px; }
.stat-sort-inline .field-label { margin: 0; white-space: nowrap; }
.stat-sort-inline .modern-select { min-width: 170px; }
.stat-sort-select { min-width: 168px; }
@media (max-width: 640px) {
  .stats-selects { transform: none; }
  .stat-sort-bar { align-items: stretch; }
  .stat-sort-inline { min-width: 0; flex: 1; }
  .stat-sort-inline .modern-select { min-width: 0; flex: 1; }
  .stat-sort-select { min-width: 140px; }
}
.stats-empty { display: grid; place-items: center; min-height: 325px; padding: 2rem; color: var(--muted-foreground); text-align: center; }
.stats-empty-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; color: var(--coral); background: rgba(230,109,85,.1); border-radius: 1rem; }
.stats-empty h2 { margin: 0 0 .4rem; color: var(--ink); font-family: var(--app-font-serif); font-size: 1.5rem; }
.stats-empty p { max-width: 270px; margin: 0; font-size: .78rem; line-height: 1.55; }
.session-list { display: grid; gap: .65rem; margin-top: 1.1rem; }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .82rem .9rem; background: rgba(235,225,209,.45); border: 0; border-radius: .7rem; text-align: left; transition: transform .18s ease, background-color .18s ease; }
.session-row:hover { background: rgba(235,225,209,.8); transform: translateX(3px); }
.session-row strong { display: block; color: var(--ink); font-size: .76rem; }
.session-row span span { display: block; margin-top: .18rem; color: var(--muted-foreground); font-size: .65rem; }
.session-row b { color: var(--plum); font-family: var(--app-font-mono); font-size: .78rem; white-space: nowrap; }
.confirm-row { box-shadow: 0 12px 32px rgba(62,43,88,.12); }
:focus-visible { outline: 3px solid rgba(230,109,85,.5); outline-offset: 3px; }
@media (max-width: 820px) {
  .roll-layout, .stats-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .topbar, .page-wrap { width: min(100% - 1.25rem, 1180px); }
  .topbar { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
  .brand-subtitle, .topbar-action span { display: none; }
  .page-wrap { padding-top: 1rem; }
  .view-heading, .stats-head { display: block; margin-top: 2rem; }
  .view-heading h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .view-heading-copy { margin-top: 1rem; }
  .roll-stage { min-height: 410px; padding: 1.3rem; border-radius: 1.15rem; }
  .stage-result { margin-top: 4rem; }
   .roll-controls { align-items: start; flex-direction: column; gap: .65rem; padding: .8rem .9rem; }
   .dice-control { justify-content: space-between; width: 100%; }
   .roll-control-hint { padding-left: .1rem; }
  .side-stack, .below-grid, .stat-summary-grid { grid-template-columns: 1fr; }
  .below-grid { margin-top: 1rem; }
  .utility-actions { padding: .6rem .75rem; }
  .stats-head .view-heading { margin-top: 0; }
  .session-select-wrap { margin-top: 1.4rem; }
  .stat-summary-grid { gap: .75rem; }
  .summary-card { min-height: 115px; }
   .stats-selects { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
   .sum-stat { grid-template-columns: 2.3rem minmax(45px, 1fr) 1.9rem 2.7rem; gap: .55rem; }
   .face-bar-track { margin-inline: .3rem; }
}
/* Android WebView compatibility: keep the same visual language as the web version. */
svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: 0 0 auto; }
button, a, select { -webkit-tap-highlight-color: transparent; }
.roll-stage, .text-button, .view-tab, .topbar-action, .stepper button, .session-row { touch-action: manipulation; }


.dark .view-switcher { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.dark .view-tab.is-active { background: var(--card); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.dark .topbar-action { color: var(--plum); background: rgba(255,255,255,.04); border-color: var(--border); }
.dark .roll-controls { background: rgba(39,34,51,.92); }
.dark .quick-stat, .dark .session-row { background: rgba(255,255,255,.06); }
.dark .stat-card { background: rgba(39,34,51,.9); }
.dark .session-select { background: rgba(39,34,51,.92); color: var(--ink); }
.dark .face-bar-track { background: #332d40; }
.dark .text-button:hover, .dark .session-row:hover, .dark .quick-stat { background: rgba(255,255,255,.08); }
.dark .app-shell { background:
    radial-gradient(circle at 85% 6%, rgba(244,174,67,.08), transparent 24rem),
    radial-gradient(circle at -5% 88%, rgba(126,85,160,.12), transparent 28rem),
    var(--paper); }

/* Stability + settings UI */
.view-heading, .roll-layout, .stats-grid { animation: none; }
.app-shell.is-rolling .roll-stage { cursor: wait; }
.app-shell.is-rolling .roll-stage:hover:not(:disabled) { transform: none; filter: none; box-shadow: var(--shadow-ink); }
.app-shell.is-rolling .die-tile.is-rolling { animation: roll-die .48s ease-in-out infinite; will-change: transform; }

.settings-button svg { width: 1.18rem; height: 1.18rem; display:block; fill:currentColor; }
.settings-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 1rem; background: rgba(8,5,15,.78); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.settings-panel { width: min(100%, 32rem); max-height: min(88dvh, 40rem); overflow: auto; padding: 1.35rem; color: var(--ink); background: #fffaf1; border: 1px solid var(--border); border-radius: 1.2rem; box-shadow: 0 30px 70px rgba(36,24,49,.22); }
.settings-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.35rem; }
.settings-eyebrow { margin:0 0 .35rem; color:var(--coral); font-size:.65rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.settings-heading h2 { margin:0; font-family:var(--app-font-serif); font-size:2rem; letter-spacing:-.05em; }
.settings-close { width:2rem; height:2rem; display:grid; place-items:center; color:var(--muted-foreground); background:transparent; border:0; border-radius:.55rem; font-size:1.7rem; line-height:1; }
.settings-close:hover { background:rgba(128,128,128,.1); color:var(--ink); }
.settings-section { padding:1rem 0 1.2rem; border-top:1px solid var(--border); }
.settings-label { margin-bottom:.7rem; color:var(--muted-foreground); font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.theme-choice { display:flex; align-items:center; gap:.6rem; min-height:2.8rem; padding:.65rem .7rem; color:var(--ink); background:rgba(235,225,209,.38); border:1px solid transparent; border-radius:.7rem; font-size:.78rem; font-weight:800; text-align:left; }
.theme-choice:hover { background:rgba(235,225,209,.65); }
.theme-choice.is-selected { border-color:var(--plum); box-shadow:0 0 0 2px rgba(91,58,117,.11); }
.theme-swatch { width:1.05rem; height:1.05rem; flex:0 0 auto; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.theme-check { margin-left:auto; color:var(--plum); }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-top:1px solid var(--border); }
.settings-row strong { display:block; font-size:.8rem; }
.settings-row > div:first-child span { display:block; margin-top:.2rem; color:var(--muted-foreground); font-size:.68rem; line-height:1.45; }
.switch { position:relative; box-sizing:border-box; width:3.1rem; height:1.75rem; padding:0; border:0; border-radius:99px; background:var(--paper-deep); box-shadow:inset 0 0 0 1px var(--border); }
.switch span { position:absolute; left:.18rem; top:50%; width:1.35rem; height:1.35rem; margin:0; border-radius:50%; background:var(--card); box-shadow:0 2px 5px rgba(0,0,0,.14); transition:transform .2s ease; transform:translate(0,-50%); }
.switch.is-on { background:var(--plum); }
.switch.is-on span { transform:translate(1.39rem,-50%); }
.settings-note { margin:.7rem 0 0; color:var(--muted-foreground); font-size:.66rem; line-height:1.45; }
.dark .settings-panel { background:#17131f; color:#f7f1fb; box-shadow:0 30px 70px rgba(0,0,0,.7); border-color:#393043; }
.dark .settings-heading h2, .dark .settings-row strong, .dark .theme-choice { color:#f7f1fb; }
.dark .settings-label, .dark .settings-row > div:first-child span, .dark .settings-note { color:#bcb2c9; }
.dark .settings-close { color:#c9bed1; }
.dark .theme-choice { background:#201a28; }
@media (max-width: 640px) {
  .settings-panel { padding:1.1rem; border-radius:1rem; }
  .theme-grid { grid-template-columns:1fr 1fr; }
}

.dark .die-tile { color:var(--die-fg); background:var(--die-bg); border-color:var(--die-border); box-shadow:var(--die-shadow); }
.dark .roll-stage { color:#f8f0df; }
.dark .roll-controls { border-color:#3b3344; }
.dark .quick-stat strong, .dark .stepper-value, .dark .session-row b { color:var(--plum); }

/* v4 Android edge-to-edge and dark-mode polish */
.app-shell { min-height: 100dvh; }
html, body { background: var(--paper); }
.settings-button { min-width: 2.65rem; min-height: 2.65rem; justify-content: center; padding: .62rem; border-radius: .82rem; }
.settings-button svg { width: 1.25rem; height: 1.25rem; display:block; fill:currentColor; }
@media (max-width: 640px) { .settings-button { width: 2.65rem; height: 2.65rem; padding: 0; border-radius: .8rem; } }
.dark .quick-stat, .dark .session-row { background: #211c2b; }
.dark .quick-stat:hover, .dark .session-row:hover { background: #292333; }
.dark .text-button:hover { background: #292333; }
.dark .view-switcher { background: #201b29; border-color: #332c3c; }
.dark .view-tab.is-active { background: #2b2535; color: #f7f1fb; }
.dark .topbar-action { background: #211c2b; border-color: #3a3244; }
.dark .topbar-action:hover { background: #292333; }
.dark .session-select { background: #211c2b; border-color: #3a3244; }
.dark .face-bar-track { background: #2a2434; }
.dark .stat-card { background: #211c2b; }
.dark .settings-panel { background: #15111c; border-color: #3c3347; }
.dark .theme-choice { background: #201a28; color: #f7f1fb; }
.dark .theme-choice:hover { background: #2a2234; }

/* v6 dark-mode cleanup: eliminate washed-out/bright boxes in dark mode. */
.dark,
.dark body,
.dark html { color-scheme: dark; }
.dark .app-shell { background:
  radial-gradient(circle at 85% 6%, rgba(244,174,67,.055), transparent 24rem),
  radial-gradient(circle at -5% 88%, rgba(126,85,160,.09), transparent 28rem),
  var(--paper); }
.dark .app-shell::before { opacity: .12; mix-blend-mode: screen; }
.dark .topbar-action,
.dark .view-switcher,
.dark .view-tab.is-active,
.dark .roll-controls,
.dark .stepper,
.dark .paper-card,
.dark .stat-card,
.dark .session-select,
.dark .quick-stat,
.dark .session-row,
.dark .theme-choice {
  background: #1b1723;
  border-color: #332a3c;
}
.dark .paper-card,
.dark .stat-card { box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.dark .roll-controls { background: #1d1826; }
.dark .stepper { background: #241e2e; }
.dark .view-switcher { background: #211b29; }
.dark .view-tab { color: #b9afc2; }
.dark .view-tab.is-active { background: #2b2335; color: #f7f1fb; }
.dark .topbar-action { background: #211b29; color: var(--plum); }
.dark .quick-stat,
.dark .session-row { background: #211c2b; }
.dark .session-row:hover,
.dark .quick-stat:hover,
.dark .text-button:hover { background: #2b2435; }
.dark .session-select { background: #211c2b; color: #f7f1fb; }
.dark .text-button { color: var(--plum); }
.dark .sum-number { color: #fbf4e8; }
.dark .face-bar-track { background: #292231; }
.dark .stats-empty-icon { background: rgba(230,109,85,.12); }
.dark .confirm-row { background: #34202a; }

/* Settings panel: fully dark surface with consistently readable controls. */
.dark .settings-backdrop { background: rgba(4,2,8,.84); }
.dark .settings-panel { background: #121019; color: #f8f2fb; border-color: #393040; }
.dark .settings-heading h2,
.dark .settings-row strong,
.dark .theme-choice { color: #f8f2fb; }
.dark .settings-eyebrow,
.dark .settings-label { color: #c988df; }
.dark .settings-row > div:first-child span,
.dark .settings-note { color: #b9afc2; }
.dark .settings-close { color: #d0c6d8; }
.dark .settings-close:hover { background: #282131; color: #ffffff; }
.dark .theme-choice { background: #1c1724; border-color: #32283a; }
.dark .theme-choice:hover { background: #292132; }
.dark .theme-choice.is-selected { border-color: var(--plum); box-shadow: 0 0 0 2px color-mix(in srgb, var(--plum) 30%, transparent); }
.dark .theme-check { color: var(--plum); }
/* The new settings glyph should be cleanly centered at the same visual weight as the other icons. */
.settings-button { gap: 0; }
.settings-button svg { width: 1.28rem; height: 1.28rem; display: block; overflow: visible; }
.settings-button { line-height: 0; }


/* v7 feature additions */
.die-numbered { font-family: var(--app-font-mono); font-weight: 800; }
.die-face-number { font-size: 1.1rem; line-height: 1; }
.die-tile-small.die-numbered .die-face-number { font-size: .72rem; }
.dice-sides { display:flex; align-items:center; gap:.38rem; }
.inline-label { margin:0; }
.mini-select { padding:.55rem .58rem; color:var(--plum); background:var(--card); border:1px solid var(--border); border-radius:.65rem; font-size:.75rem; font-weight:800; }
.preset-strip { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-top:.75rem; }
.preset-label { color:var(--muted-foreground); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.preset-chip { padding:.45rem .68rem; color:var(--plum); background:var(--card); border:1px solid var(--border); border-radius:999px; font-size:.7rem; font-weight:800; }
.preset-chip:hover { background:var(--paper-deep); }
.history-actions { display:flex; align-items:center; gap:.5rem; }
.icon-button,.mini-icon-button { display:grid; place-items:center; width:2rem; height:2rem; padding:0; color:var(--muted-foreground); background:transparent; border:0; border-radius:.55rem; }
.icon-button svg,.mini-icon-button svg { width:1rem; height:1rem; }
.icon-button:hover,.mini-icon-button:hover { background:rgba(128,128,128,.12); color:var(--coral); }
.inline-link { display:inline-flex; align-items:center; gap:.25rem; margin-top:.32rem; padding:0; color:var(--plum); background:none; border:0; font-size:.68rem; font-weight:800; }
.inline-link svg { width:.82rem; height:.82rem; }
.stat-summary-grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; width:100%; padding:.78rem .9rem; color:var(--primary-foreground); background:var(--plum); border:0; border-radius:.72rem; font-size:.75rem; font-weight:900; }
.primary-button svg { width:1rem; height:1rem; }
.color-pickers { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.8rem; }
.color-pickers label { display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:var(--muted-foreground); font-size:.7rem; font-weight:800; }
.color-pickers input[type=color] { width:3rem; height:2rem; padding:.12rem; background:transparent; border:1px solid var(--border); border-radius:.55rem; }
.suggested-colors { display: grid; gap: .5rem; margin-top: .75rem; }
.suggested-label { color: var(--muted-foreground); font-size: .65rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.suggested-swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.suggested-color { width: 2rem; height: 1.55rem; padding: 0; background: var(--suggested); border: 1px solid rgba(55,45,60,.12); border-radius: .48rem; box-shadow: inset 0 0 0 2px rgba(255,255,255,.48); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.suggested-color:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 3px 8px rgba(55,45,60,.10); }
.suggested-color:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.custom-swatch { background:conic-gradient(from 45deg,var(--coral),var(--saffron),var(--plum),var(--coral)); }
.preset-manage-list { display:grid; gap:.45rem; margin-top:.65rem; }
.preset-manage { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.55rem .65rem; background:var(--card); border:1px solid var(--border); border-radius:.65rem; font-size:.73rem; font-weight:800; }
.settings-row.nested { padding:.68rem 0; }
.dark .mini-select,.dark .preset-chip,.dark .icon-button,.dark .mini-icon-button,.dark .preset-manage,.dark .color-pickers input[type=color] { background:#1b1723; color:#f7f1fb; }
.dark .mini-select { border-color:#3a3244; }
.dark .preset-chip:hover,.dark .mini-icon-button:hover,.dark .icon-button:hover { background:#292333; }
@media (max-width: 980px) { .stat-summary-grid-5 { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 640px) {
  .dice-sides { margin-left:auto; }
  .preset-strip { padding-top:.2rem; }
  .stat-summary-grid-5 { grid-template-columns:1fr 1fr; gap:.65rem; }
  .summary-card:last-child { grid-column:1 / -1; }
  .color-pickers { grid-template-columns:1fr; }
}

/* v8 settings interaction polish */
body.settings-open { overflow: hidden; overscroll-behavior: none; }
.settings-backdrop { overscroll-behavior: contain; }
.settings-panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }


/* Compact stat summary cards: rolls on top, frequency cards side by side. */
.stat-summary-grid-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "rolls rolls"
    "most least";
  gap: .75rem;
}
.stat-summary-grid-3 .summary-card { min-height: 92px; height: 92px; padding: 1rem 1.05rem; }
.stat-summary-grid-3 .summary-card:nth-child(1) { grid-area: rolls; }
.stat-summary-grid-3 .summary-card:nth-child(2) { grid-area: most; }
.stat-summary-grid-3 .summary-card:nth-child(3) { grid-area: least; }
.stat-summary-grid-3 .summary-label { margin-bottom: .7rem; }
.stat-summary-grid-3 .summary-value { font-size: clamp(1.45rem, 3.5vw, 2.45rem); }
.stat-summary-grid-3 .summary-foot { margin-top: .35rem; }
@media (max-width: 640px) {
  .stat-summary-grid-3 { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .stat-summary-grid-3 .summary-card { min-height: 84px; height: 84px; padding: .85rem .9rem; }
  .stat-summary-grid-3 .summary-value { font-size: clamp(1.3rem, 7vw, 2rem); }
}


.session-created { display:block; margin-top:.22rem; color:var(--muted-foreground); font-size:.67rem; font-weight:700; }
.dark .session-created { color:#b9afc2; }

/* v10 micro-adjustments */
.roll-controls { grid-template-columns: 1fr auto; }
.dice-control { justify-content:flex-start; }
.roll-control-hint { display:none !important; }
.dice-sides { margin-left:auto; }
.mini-select { min-width:4.6rem; text-align:center; }
.text-prompt-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1rem; background:rgba(5,3,10,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.text-prompt-card { width:min(100%,22rem); padding:1.15rem; border:1px solid var(--border); border-radius:1rem; background:var(--card); color:var(--ink); box-shadow:0 24px 60px rgba(0,0,0,.28); }
.text-prompt-label { margin-bottom:.55rem; font-size:.82rem; font-weight:900; }
.text-prompt-input { width:100%; box-sizing:border-box; padding:.72rem .78rem; color:var(--ink); background:var(--paper); border:1px solid var(--border); border-radius:.65rem; outline:none; font:inherit; }
.text-prompt-input:focus { border-color:var(--plum); box-shadow:0 0 0 3px color-mix(in srgb, var(--plum) 16%, transparent); }
.text-prompt-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.8rem; }
.text-prompt-actions button { padding:.58rem .8rem; border-radius:.62rem; border:1px solid var(--border); background:transparent; color:var(--ink); font-size:.74rem; font-weight:800; }
.text-prompt-actions .text-prompt-ok { background:var(--plum); color:var(--primary-foreground); border-color:var(--plum); }
.dark .text-prompt-card { background:#15111c; border-color:#3b3245; }
.dark .text-prompt-input { background:#1d1825; border-color:#403648; color:#f7f1fb; }

/* v10 dice control layout: label left, count control centered, sides dropdown right. */
.roll-controls { display:grid; grid-template-columns:auto 1fr auto; align-items:center; }
.dice-control { display:contents; }
.dice-control-label { grid-column:1; margin:0; }
.stepper { grid-column:2; justify-self:center; }
.dice-sides { grid-column:3; margin-left:0; justify-self:end; }
@media (max-width: 640px) {
  .roll-controls { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem; }
  .dice-control { display:contents; }
  .dice-control-label { grid-column:1; }
  .stepper { grid-column:2; justify-self:center; }
  .dice-sides { grid-column:3; margin-left:0; justify-self:end; }
}


/* v13 stability + polish */
.roll-controls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.55rem; }
.dice-control { display:contents; }
.dice-control-label { grid-column:1; justify-self:start; }
.stepper { grid-column:2; justify-self:center; }
.dice-sides { grid-column:3; justify-self:end; margin-left:0; }
@media (max-width:640px) {
  .roll-controls { grid-template-columns:1fr auto 1fr; }
  .dice-control-label { justify-self:start; }
  .stepper { justify-self:center; }
  .dice-sides { justify-self:end; }
}

.sum-stat .face-bar-track { margin-left:1.15rem; margin-right:.35rem; }
@media (max-width:640px) { .sum-stat .face-bar-track { margin-left:.95rem; margin-right:.28rem; } }

.sides-trigger { display:inline-flex; align-items:center; justify-content:center; gap:.32rem; min-width:4.8rem; padding:.55rem .62rem; color:var(--plum); background:var(--card); border:1px solid var(--border); border-radius:.65rem; font-size:.75rem; font-weight:800; line-height:1; }
.sides-trigger:disabled { opacity:.5; }
.sides-trigger .sides-chevron { display:inline-flex; width:.78rem; height:.78rem; transform:rotate(90deg); opacity:.7; }
.sides-trigger .sides-chevron svg { width:.78rem; height:.78rem; }
.sides-menu { position:fixed; z-index:100; max-height:min(18rem,calc(100dvh - 1rem)); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:.36rem; background:#fffaf1; border:1px solid var(--border); border-radius:.85rem; box-shadow:0 18px 42px rgba(35,23,50,.2); }
.sides-option { display:flex; align-items:center; justify-content:space-between; width:100%; box-sizing:border-box; padding:.63rem .65rem; color:var(--ink); background:transparent; border:0; border-radius:.62rem; font-size:.76rem; font-weight:800; text-align:left; }
.sides-option:hover,.sides-option:focus-visible { background:rgba(91,58,117,.08); outline:none; }
.sides-option.is-selected { color:var(--plum); background:rgba(91,58,117,.09); }
.sides-check { color:var(--plum); font-weight:900; }
.dark .sides-menu { background:#15111c; border-color:#3b3245; box-shadow:0 20px 46px rgba(0,0,0,.52); }
.dark .sides-option { color:#f7f1fb; }
.dark .sides-option:hover,.dark .sides-option:focus-visible { background:#292333; }
.dark .sides-option.is-selected { color:var(--plum); background:#251d30; }
.dark .sides-trigger { background:#211b29; border-color:#3a3244; color:var(--plum); }

.text-prompt-input { background:#fffaf1 !important; color:#29213f !important; border-color:#d9cdbd !important; }
.dark .text-prompt-input { background:#15111c !important; color:#f7f1fb !important; border-color:#3b3245 !important; }
html, body, body * { -webkit-tap-highlight-color:transparent; }


/* v14 modern picker + opaque dialogs + switch alignment */
.modern-select {
  width: 100%;
  min-height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  box-sizing: border-box;
  padding: .68rem .78rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: .72rem;
  font-size: .78rem;
  font-weight: 800;
  text-align: left;
  box-shadow: 0 2px 7px rgba(62,43,88,.04);
}
.modern-select:hover { border-color: color-mix(in srgb, var(--plum) 34%, var(--border)); }
.modern-select:focus-visible { outline: 3px solid rgba(230,109,85,.28); outline-offset: 2px; }
.modern-select > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modern-select > svg { width: .9rem; height: .9rem; flex:0 0 auto; transform: rotate(90deg); color:var(--muted-foreground); }
.choice-menu {
  position: fixed;
  z-index: 120;
  box-sizing: border-box;
  max-height: min(22rem, calc(100dvh - 1rem));
  overflow-y: auto;
  overflow-x: hidden;
  padding: .38rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: 0 18px 42px rgba(35,23,50,.22);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.choice-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  width:100%;
  box-sizing:border-box;
  padding:.68rem .72rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-radius:.66rem;
  font-size:.76rem;
  font-weight:800;
  text-align:left;
}
.choice-option:hover,.choice-option:focus-visible { background:rgba(91,58,117,.08); outline:none; }
.choice-option.is-selected { color:var(--plum); background:color-mix(in srgb, var(--plum) 10%, var(--paper)); }
.choice-check { color:var(--plum); font-weight:900; }
.text-prompt-card { background: var(--paper) !important; color:var(--ink); opacity:1; }
.text-prompt-input { background: var(--paper) !important; color:var(--ink) !important; border-color:var(--border) !important; opacity:1; }
.text-prompt-backdrop { z-index: 150; }
.dark .choice-menu { background:#15111c; color:#f8f2fb; border-color:#3b3245; box-shadow:0 20px 46px rgba(0,0,0,.52); }
.dark .choice-option { color:#f8f2fb; }
.dark .choice-option:hover,.dark .choice-option:focus-visible { background:#292333; }
.dark .choice-option.is-selected { color:var(--plum); background:#251d30; }
.dark .modern-select { background:#211b29; color:#f7f1fb; border-color:#3a3244; }
.dark .modern-select > svg { color:#b9afc2; }

/* v18 animation rendering: keep motion visible beyond the tile's layout box. */
.die-row {
  contain: layout;
  overflow: visible;
  transform: translateZ(0);
  perspective: 900px;
  transform-style: preserve-3d;
}
.die-tile {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0);
  transform-style: preserve-3d;
}
.app-shell.is-rolling .die-tile.is-rolling {
  will-change: transform;
  animation-duration: var(--roll-duration, .76s) !important;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.animation-style-bounce { --roll-duration: .62s; }
.animation-style-flip { --roll-duration: .7s; }
.animation-style-spin { --roll-duration: .68s; }
.animation-style-shuffle { --roll-duration: .58s; }
.animation-style-pulse { --roll-duration: .64s; }

.animation-style-bounce .die-tile.is-rolling { animation-name: roll-bounce-smooth !important; animation-timing-function: cubic-bezier(.34,1.56,.5,1); }
.animation-style-flip .die-tile.is-rolling { animation-name: roll-flip-smooth !important; animation-timing-function: cubic-bezier(.45,0,.2,1); backface-visibility: visible; -webkit-backface-visibility: visible; }
.animation-style-spin .die-tile.is-rolling { animation-name: roll-spin-smooth !important; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
.animation-style-shuffle .die-tile.is-rolling { animation-name: roll-shuffle-smooth !important; animation-timing-function: cubic-bezier(.36,.07,.19,.97); }
.animation-style-pulse .die-tile.is-rolling { animation-name: roll-pulse-smooth !important; animation-timing-function: cubic-bezier(.45,0,.55,1); }

@keyframes roll-bounce-smooth {
  0% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); }
  20% { transform: translate3d(0, -11px, 0) scale(.94, 1.08) rotate(-6deg); }
  45% { transform: translate3d(0, 3px, 0) scale(1.08, .92) rotate(5deg); }
  70% { transform: translate3d(0, -4px, 0) scale(.97, 1.04) rotate(-2deg); }
  100% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); }
}
/* Coin-flip: rotates on the Y axis only and squishes width at the 90/270deg
   points to sell the illusion of thickness. Because it's driven by a single
   flat tile (no 6 painted faces), this is the closest 2D-friendly stand-in
   for a true 3D cube tumble - cheap (transform-only, GPU-composited) and,
   unlike the old tumble, never goes fully invisible mid-spin. */
@keyframes roll-flip-smooth {
  0% { transform: translate3d(0, 0, 0) rotateY(0deg) scale3d(1, 1, 1); }
  25% { transform: translate3d(0, -7px, 0) rotateY(180deg) scale3d(.22, 1.06, 1); }
  50% { transform: translate3d(0, 2px, 0) rotateY(360deg) scale3d(1, 1, 1); }
  75% { transform: translate3d(0, -4px, 0) rotateY(540deg) scale3d(.22, 1.06, 1); }
  100% { transform: translate3d(0, 0, 0) rotateY(720deg) scale3d(1, 1, 1); }
}
@keyframes roll-spin-smooth {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  35% { transform: translate3d(0, -6px, 0) rotate(190deg) scale(1.05); }
  65% { transform: translate3d(0, 2px, 0) rotate(340deg) scale(.97); }
  85% { transform: translate3d(0, -2px, 0) rotate(370deg) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}
@keyframes roll-shuffle-smooth {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  16% { transform: translate3d(-8px, -3px, 0) rotate(-6deg); }
  33% { transform: translate3d(8px, 1px, 0) rotate(6deg); }
  50% { transform: translate3d(-6px, -2px, 0) rotate(-4deg); }
  67% { transform: translate3d(5px, 0, 0) rotate(3deg); }
  84% { transform: translate3d(-2px, -1px, 0) rotate(-1deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes roll-pulse-smooth {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  18% { transform: translate3d(0, -3px, 0) scale(1.12) rotate(-3deg); }
  40% { transform: translate3d(0, 1px, 0) scale(.92) rotate(3deg); }
  62% { transform: translate3d(0, -2px, 0) scale(1.06) rotate(-1.5deg); }
  84% { transform: translate3d(0, 0, 0) scale(.98) rotate(1deg); }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

/* Give the animation-style picker the same compact proportions as the other settings controls. */
.animation-style-trigger { width: min(11rem, 46vw); flex: 0 0 auto; }
@media (max-width: 640px) {
  .animation-style-row { align-items: flex-start; }
  .animation-style-trigger { width: 10rem; }
}


/* v22 custom color picker: app-native, softer, and separate from the platform color dialog. */
.custom-color-list { display:grid; gap:.2rem; margin-top:.75rem; }
.custom-color-row { display:flex; align-items:center; justify-content:space-between; gap:.85rem; padding:.72rem 0; border-top:1px solid var(--border); }
.custom-color-row:first-child { border-top:0; }
.custom-color-row > div:first-child { min-width:0; }
.custom-color-row strong { display:block; color:var(--ink); font-size:.78rem; font-weight:900; }
.custom-color-row > div:first-child span { display:block; margin-top:.18rem; color:var(--muted-foreground); font-size:.66rem; line-height:1.4; }
.custom-color-actions { display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.custom-color-swatch { width:2.25rem; height:2.25rem; flex:0 0 auto; padding:.18rem; border:1px solid var(--border); border-radius:.72rem; background:var(--card); box-shadow:0 2px 8px rgba(55,45,60,.07); cursor:pointer; }
.custom-color-swatch::after { content:""; display:block; width:100%; height:100%; border-radius:.5rem; background:var(--current-color); box-shadow:inset 0 0 0 1px rgba(55,45,60,.12); }
.custom-color-swatch:hover { border-color:color-mix(in srgb,var(--plum) 34%,var(--border)); transform:translateY(-1px); }
.custom-color-swatch:focus-visible { outline:3px solid rgba(230,109,85,.22); outline-offset:2px; }
.custom-reset-link { white-space:nowrap; margin-top:0; font-size:.65rem; }

.color-picker-open { overflow:hidden; }
.color-picker-backdrop { position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:1rem; background:rgba(12,9,17,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.color-picker-card { width:min(100%,23rem); box-sizing:border-box; padding:1.1rem; color:var(--ink); background:var(--paper); border:1px solid var(--border); border-radius:1.15rem; box-shadow:0 28px 70px rgba(32,22,42,.3); }
.color-picker-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; margin-bottom:.95rem; }
.color-picker-eyebrow { margin:0 0 .22rem; color:var(--coral); font-size:.6rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.color-picker-heading h2 { margin:0; font-family:var(--app-font-serif); font-size:1.55rem; letter-spacing:-.045em; }
.color-picker-close { width:1.9rem; height:1.9rem; display:grid; place-items:center; padding:0; color:var(--muted-foreground); background:transparent; border:0; border-radius:.55rem; font-size:1.5rem; line-height:1; }
.color-picker-close:hover { color:var(--ink); background:rgba(128,128,128,.1); }
.color-picker-preview-row { display:flex; align-items:center; gap:.7rem; padding:.68rem; margin-bottom:.85rem; background:color-mix(in srgb,var(--card) 78%,transparent); border:1px solid var(--border); border-radius:.82rem; }
.color-picker-preview { width:2.35rem; height:2.35rem; flex:0 0 auto; border-radius:.65rem; box-shadow:inset 0 0 0 1px rgba(55,45,60,.14),0 2px 7px rgba(55,45,60,.08); }
.color-picker-preview-row strong { display:block; font-size:.72rem; letter-spacing:.06em; }
.color-picker-preview-row span { display:block; margin-top:.12rem; color:var(--muted-foreground); font-size:.64rem; }
.color-picker-surface { position:relative; width:100%; height:11rem; overflow:hidden; border-radius:.82rem; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue) 100% 50%)); box-shadow:inset 0 0 0 1px rgba(55,45,60,.14); touch-action:none; cursor:crosshair; }
.color-picker-marker { position:absolute; width:1rem; height:1rem; box-sizing:border-box; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; box-shadow:0 1px 5px rgba(0,0,0,.34),0 0 0 1px rgba(0,0,0,.28); pointer-events:none; }
.color-picker-hue { width:100%; height:1.15rem; margin:.7rem 0 .85rem; padding:0; appearance:none; -webkit-appearance:none; background:linear-gradient(90deg,#f44,#ff0,#0f8,#0ff,#08f,#80f,#f0f,#f44); border-radius:999px; outline:none; }
.color-picker-hue::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:1.15rem; height:1.15rem; border:2px solid #fff; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.2); }
.color-picker-hue::-moz-range-thumb { width:1.15rem; height:1.15rem; border:2px solid #fff; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.2); }
.color-picker-hex-row { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.color-picker-hex-row label { color:var(--muted-foreground); font-size:.66rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.color-picker-hex-row input { min-width:0; flex:1; box-sizing:border-box; padding:.62rem .7rem; color:var(--ink); background:var(--card); border:1px solid var(--border); border-radius:.65rem; outline:none; font:700 .75rem var(--app-font-mono); letter-spacing:.04em; }
.color-picker-hex-row input:focus { border-color:var(--plum); box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 13%,transparent); }
.color-picker-section-title { margin-bottom:.55rem; color:var(--muted-foreground); font-size:.63rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.color-picker-suggestion-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.color-picker-suggestion { display:flex; align-items:center; gap:.45rem; min-width:0; padding:.48rem .5rem; color:var(--ink); background:var(--card); border:1px solid var(--border); border-radius:.65rem; text-align:left; }
.color-picker-suggestion:hover { border-color:color-mix(in srgb,var(--plum) 30%,var(--border)); transform:translateY(-1px); }
.color-picker-suggestion span { width:1.1rem; height:1.1rem; flex:0 0 auto; border-radius:50%; background:var(--suggested); box-shadow:inset 0 0 0 1px rgba(55,45,60,.12); }
.color-picker-suggestion small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.58rem; font-weight:800; }
.color-picker-actions { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:.45rem; margin-top:1rem; }
.color-picker-actions button { min-height:2.15rem; padding:.55rem .7rem; border-radius:.62rem; font-size:.68rem; font-weight:900; }
.color-picker-reset { color:var(--plum); background:transparent; border:0; padding-left:0 !important; padding-right:0 !important; }
.color-picker-cancel { color:var(--muted-foreground); background:transparent; border:1px solid transparent; }
.color-picker-set { color:var(--primary-foreground); background:var(--plum); border:1px solid var(--plum); min-width:3.4rem; }
.dark .custom-color-row strong { color:#f8f2fb; }
.dark .custom-color-swatch { background:#1b1723; border-color:#3a3244; }
.dark .color-picker-card { background:#15111c; border-color:#3b3245; box-shadow:0 28px 70px rgba(0,0,0,.62); }
.dark .color-picker-preview-row,.dark .color-picker-suggestion,.dark .color-picker-hex-row input { background:#1c1724; border-color:#3a3244; }
.dark .color-picker-suggestion { color:#f8f2fb; }
.dark .color-picker-hex-row input { color:#f8f2fb; }
@media (max-width:640px) {
  .custom-color-row { align-items:flex-start; }
  .custom-color-actions { flex-direction:column; align-items:flex-end; }
  .color-picker-card { padding:1rem; border-radius:1rem; }
  .color-picker-surface { height:10rem; }
  .color-picker-suggestion-grid { grid-template-columns:repeat(2,1fr); }
  .color-picker-actions { grid-template-columns:1fr auto auto; }
  .color-picker-reset { grid-column:1; }
}


/* V26 interaction polish */
button, input, select, textarea, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { -webkit-user-select: none; user-select: none; }
.developer-open { overflow:hidden; }
.developer-backdrop { position:fixed; inset:0; z-index:220; display:grid; place-items:center; padding:1rem; background:rgba(12,9,17,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.developer-card { width:min(100%,26rem); max-height:min(88vh,44rem); overflow:auto; box-sizing:border-box; padding:1.1rem; color:var(--ink); background:var(--paper); border:1px solid var(--border); border-radius:1.15rem; box-shadow:0 28px 70px rgba(32,22,42,.3); }
.developer-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.8rem 0 1rem; }
.developer-row strong { display:block; color:var(--ink); font-size:.78rem; font-weight:900; }
.developer-row span { display:block; margin-top:.18rem; color:var(--muted-foreground); font-size:.66rem; line-height:1.4; }
.developer-number { width:6rem; box-sizing:border-box; padding:.65rem .7rem; color:var(--ink); background:var(--card); border:1px solid var(--border); border-radius:.65rem; outline:none; font:800 .78rem var(--app-font-mono); }
.developer-number:focus { border-color:var(--plum); box-shadow:0 0 0 3px color-mix(in srgb,var(--plum) 13%,transparent); }
.developer-results { margin-top:.9rem; border-top:1px solid var(--border); padding-top:.85rem; }
.developer-summary { display:flex; justify-content:space-between; gap:.6rem; align-items:baseline; margin-bottom:.65rem; }
.developer-summary strong { font-size:.8rem; }
.developer-summary span { color:var(--muted-foreground); font-size:.65rem; }
.developer-distribution { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; margin-bottom:.8rem; }
.developer-distribution div { display:flex; justify-content:space-between; padding:.4rem .5rem; background:var(--card); border:1px solid var(--border); border-radius:.55rem; font:700 .68rem var(--app-font-mono); }
.developer-roll-list { max-height:14rem; overflow:auto; display:grid; gap:.25rem; }
.developer-roll-list div { display:grid; grid-template-columns:3rem 1fr auto; gap:.4rem; padding:.38rem .45rem; border-bottom:1px dashed var(--border); font-size:.64rem; }
.developer-roll-list span:first-child { color:var(--muted-foreground); }
.developer-roll-list strong { font-family:var(--app-font-mono); }
.dark .developer-card { background:#15111c; border-color:#3b3245; box-shadow:0 28px 70px rgba(0,0,0,.62); }
.dark .developer-number, .dark .developer-distribution div { background:#1c1724; border-color:#3a3244; color:#f8f2fb; }
@media (max-width:640px) { .developer-card { padding:1rem; border-radius:1rem; } }

@media (max-width: 760px) {
  .view-nav-row { gap: .65rem; }
  .download-app-button { min-height: 2.65rem; padding: .58rem .82rem; font-size: .76rem; }
}

/* V32: compact top-bar download action and icon-only settings. */
.brand-subtitle { display: none !important; }
.topbar-download-button {
  min-height: 2.25rem;
  padding: .48rem .72rem;
  border-radius: .68rem;
  font-size: .72rem;
  box-shadow: 0 3px 9px rgba(55,38,78,.10);
  margin-left: auto;
  margin-right: .15rem;
}
.topbar-download-button:hover {
  box-shadow: 0 5px 12px rgba(55,38,78,.14);
}
.settings-button {
  width: 2.55rem;
  height: 2.55rem;
  min-width: 2.55rem;
  min-height: 2.55rem;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.settings-button span { display: none !important; }
.settings-button svg {
  width: 1.22rem;
  height: 1.22rem;
}
@media (max-width: 640px) {
  .topbar { gap: .55rem; }
  .topbar-download-button {
    min-height: 2.2rem;
    padding: .44rem .65rem;
    font-size: .7rem;
  }
  .settings-button {
    width: 2.55rem;
    height: 2.55rem;
    min-width: 2.55rem;
  }
}