/* Rollune app UI for the web tools. Tokens mirror lib/theme/themes/light_theme.dart
   ("No Theme"): cream gradient background, #3A3A40 cards, white dice keys with a
   28% drop shadow and a 2px press depth, #3B82F6 counters, Lucide icons. */
.app {
  --a-bg: linear-gradient(135deg, #fdfaf5, #f5ecd8);
  --a-ink: #0e0e10; --a-ink2: #3a3a3d; --a-ink3: #75757a; --a-ink4: #a8a8ad;
  --a-card: #3a3a40; --a-card-alt: #4a4a50; --a-card-ink: #ececec; --a-card-ink2: #c8c8cc; --a-card-ink3: #9a9aa0; --a-card-line: #4a4a52;
  --a-surface2: #f5f5f2; --a-counter: #3b82f6; --a-pos: #1f8a4f; --a-neg: #c53030; --a-tint: #ffd56a;
  --a-key: linear-gradient(180deg, #fff, #f0f0ed);
  --a-key-shadow: 0 5px 10px rgba(0,0,0,.28);
  --a-key-shadow-down: 0 1.25px 4.5px rgba(0,0,0,.1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, Inter, "Segoe UI", sans-serif;
  color: var(--a-ink);
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.app [hidden] { display: none !important; }
.app .icon { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.app :focus-visible { outline: 3px solid var(--a-counter); outline-offset: 2px; }


/* Folder tabs (dice dashboard, fast-roll card and soundboard) */
.folder-tabs { display: flex; gap: .25rem; height: 2.15rem; }
.folder-tab { display: flex; flex: 1; align-items: center; justify-content: center; gap: .4rem; min-width: 0; padding: 0 .4rem; border: 0; border-radius: .65rem .65rem 0 0; background: rgba(14,14,16,.18); color: var(--a-ink2); font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase; transition: background .18s ease, color .18s ease; }
.folder-tab .icon { width: 1.05rem; height: 1.05rem; }
.folder-tab[aria-selected="true"] { background: var(--a-card); color: var(--a-card-ink); }
.folder-tab--icon { flex: 0 0 3rem; }
.folder-tab--invert[aria-pressed="true"] { background: var(--a-card-ink); color: var(--a-card); }
.folder-tab .lock-dot { width: .8rem; height: .8rem; opacity: .7; }
.folder-body { border-radius: 0 0 1rem 1rem; background: var(--a-card); color: var(--a-card-ink); }
.folder-body--rounded { border-top-right-radius: 1rem; }

/* White dice keys */
.key { position: relative; display: grid; place-items: center; border: 0; border-radius: .75rem; background: var(--a-key); box-shadow: var(--a-key-shadow); color: var(--a-ink); transition: transform 90ms ease-out, box-shadow 90ms ease-out; }
.key:active, .key.is-down { transform: translateY(2px); box-shadow: var(--a-key-shadow-down); }
.key:disabled { cursor: default; opacity: .45; }
.badge { position: absolute; top: -.4rem; right: -.4rem; display: grid; min-width: 1.55rem; height: 1.55rem; place-items: center; padding: 0 .35rem; border-radius: 999px; background: var(--a-counter); color: #fff; font-size: .78rem; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--a-card); animation: badgePop .18s ease-out; }
@keyframes badgePop { from { transform: scale(.6); } }

/* Dice dashboard */
.dash { display: grid; grid-template-columns: 1fr 4.4rem; gap: .5rem; align-items: stretch; }
.dice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; padding: .7rem; }
.die-key { aspect-ratio: 1; padding: 18%; }
.die-key img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.die-key.is-selected { box-shadow: var(--a-key-shadow), inset 0 0 0 2.5px var(--a-ink); }
.die-minus { position: absolute; bottom: -.4rem; left: -.4rem; display: grid; width: 1.45rem; height: 1.45rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--a-ink) !important; box-shadow: 0 0 0 2px var(--a-card), 0 2px 4px rgba(0,0,0,.2); }
.die-minus .icon { width: .85rem; height: .85rem; stroke-width: 3; }
.die-cell { position: relative; }

/* Modifier wheel (vertical, snap-scrolling, like the app's picker) */
.wheel-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 1rem; background: var(--a-card); color: var(--a-card-ink); }
.wheel-head { padding: .55rem 0 .2rem; font-size: .95rem; font-weight: 800; text-align: center; }
.wheel-head i { color: #6fd08c; font-style: normal; } .wheel-head em { color: #f47f73; font-style: normal; }
.wheel-wrap { position: relative; flex: 1; min-height: 11rem; }
.wheel { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.wheel::-webkit-scrollbar { display: none; }
.wheel ol { margin: 0; padding: 0; list-style: none; }
.wheel li { display: grid; height: 2.4rem; place-items: center; color: var(--a-card-ink3); font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; scroll-snap-align: center; transition: color .15s ease, font-size .15s ease; }
.wheel li.is-current { color: var(--a-card-ink); font-size: 1.35rem; font-weight: 800; }
.wheel-pad { height: calc(50% - 1.2rem); }
.wheel-lens { position: absolute; z-index: 1; left: .3rem; right: .3rem; top: 50%; height: 2.5rem; margin-top: -1.25rem; border: 1px solid rgba(255,255,255,.14); border-radius: .75rem; background: rgba(255,255,255,.07); pointer-events: none; }
.wheel-lens::after { position: absolute; right: .45rem; top: 50%; content: "‹"; color: var(--a-card-ink2); font-size: 1rem; transform: translateY(-55%); }

/* Fast-roll card: Stats / Modes / Rerolls / Presets */
.fast-tabs .folder-tab { font-family: inherit; }
.fast-body { min-height: 5.4rem; padding: .7rem; }
.mode-row { display: flex; gap: .4rem; height: 3.6rem; }
.mode-tile { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 0 .3rem; border: 1px solid var(--a-card-line); border-radius: .8rem; background: rgba(255,255,255,.04); color: var(--a-card-ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.15; text-transform: uppercase; transition: flex .22s ease, background .18s ease; }
.mode-tile small { color: var(--a-card-ink3); font-size: .64rem; }
.mode-row.has-active .mode-tile:not(.is-active) { flex: 0 0 2.6rem; }
.mode-tile.is-active { flex: 1 1 auto; display: grid; grid-template-columns: 2.4rem 1fr 2.4rem; gap: .3rem; padding: .3rem; border-color: transparent; background: var(--a-card-ink); color: var(--a-card); }
.mode-tile.is-active .step { display: grid; height: 100%; place-items: center; border-radius: .55rem; background: rgba(0,0,0,.08); font-size: 1.1rem; }
.mode-tile.is-active .mid { display: grid; gap: .1rem; text-align: center; }
.mode-tile.is-active .mid b { font-size: 1.1rem; }
.mode-row.is-disabled { opacity: .4; pointer-events: none; }
.fast-hint { margin: .5rem 0 0; color: var(--a-card-ink3); font-size: .72rem; text-align: center; }
.reroll-row { display: grid; grid-template-columns: 3rem 1fr 3rem; gap: .4rem; height: 3.6rem; }
.reroll-row button, .reroll-row output { display: grid; place-items: center; border: 1px solid var(--a-card-line); border-radius: .8rem; background: rgba(255,255,255,.04); color: var(--a-card-ink); font-size: 1.2rem; font-weight: 700; }
.reroll-row output { background: var(--a-card-ink); color: var(--a-card); font-size: 1.25rem; font-weight: 800; }
.stat-row { display: flex; gap: .4rem; overflow: hidden; }
.stat-chip { display: grid; flex: 0 0 4.2rem; place-items: center; height: 3.6rem; border: 1px solid var(--a-card-line); border-radius: .8rem; color: var(--a-card-ink); font-size: 1.15rem; font-weight: 800; line-height: 1; }
.stat-chip small { color: var(--a-card-ink3); font-size: .64rem; font-weight: 700; letter-spacing: .1em; }
.locked-overlay { position: relative; }
.locked-overlay > .lock-cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: .8rem; background: rgba(58,58,64,.72); color: #fff; font-size: .8rem; font-weight: 700; backdrop-filter: blur(2px); }
.locked-overlay > .lock-cta .icon { width: 1rem; height: 1rem; }

/* Roll bar */
.rollbar { display: grid; grid-template-columns: 3.2rem 1fr 3.2rem; align-items: center; gap: .6rem; padding: .6rem; border-radius: 1.1rem; background: var(--a-card); color: var(--a-card-ink); }
.rollbar .icon-btn { display: grid; height: 3.4rem; place-items: center; padding: 0; border: 0; background: none; color: var(--a-card-ink); }
.rollbar .icon-btn .icon { width: 1.9rem; height: 1.9rem; stroke-width: 1.8; }
.roll-key { height: 4rem; border-radius: 1rem; font-size: 1.75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }


/* Result dialog (app's roll dialog) */
.result-layer { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(245,236,216,.55); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.result-layer.is-open { opacity: 1; pointer-events: auto; }
.result-card { width: 100%; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.08); border-radius: 1.4rem; background: #fff; box-shadow: 0 1.5rem 3rem rgba(40,30,10,.25); transform: translateY(10px) scale(.98); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.result-layer.is-open .result-card { transform: none; }
.result-head { flex: none; padding: .8rem 1.1rem; background: var(--a-surface2); font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
.result-rolling { display: grid; justify-items: center; padding: 1.4rem 1rem 1.8rem; }
.result-rolling .lottie { width: 8.5rem; height: 8.5rem; }
.result-rolling small { margin-top: .8rem; color: var(--a-ink3); font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
.result-rolling b { margin-top: .2rem; color: var(--a-ink2); font-size: 1.1rem; }
.result-scroll { flex: 1; overflow-y: auto; padding: 1rem 1rem .4rem; }
.hero-card { padding: .9rem 1rem; border: 1px solid var(--a-card-ink); border-radius: 1rem; background: var(--a-card-alt); color: var(--a-card-ink); box-shadow: 4px 4px 0 var(--a-card-ink), 4px 4px 0 1px rgba(0,0,0,.15); }
.hero-top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
.hero-top small { color: var(--a-card-ink3); font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.hero-total { font-size: 3.4rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.math { display: grid; gap: .25rem; }
.math div { display: flex; justify-content: space-between; padding: .25rem .55rem; border-radius: .5rem; background: rgba(255,255,255,.06); font-size: .82rem; }
.math span { color: var(--a-card-ink3); font-weight: 700; letter-spacing: .08em; } .math b { font-variant-numeric: tabular-nums; }
.hero-foot { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--a-card-line); }
.hero-foot p { flex: 1; margin: 0; color: var(--a-card-ink2); font-weight: 700; }
.mode-badge { padding: .25rem .55rem; border-radius: .45rem; background: var(--a-card-ink); color: var(--a-card); font-size: .7rem; font-weight: 800; letter-spacing: .06em; }
.crit { display: inline-flex; align-items: center; gap: .3rem; margin-top: .7rem; padding: .3rem .6rem; border-radius: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.crit--hi { background: #e5f5ea; color: var(--a-pos); } .crit--lo { background: #fbe7e7; color: var(--a-neg); }
.groups { display: grid; gap: .6rem; margin-top: .9rem; }
.group { padding: .6rem .7rem; border: 1px solid #ecebe6; border-radius: .9rem; background: #faf9f6; }
.group-head { display: flex; justify-content: space-between; margin-bottom: .45rem; color: var(--a-ink3); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.group-head b { color: var(--a-ink); }
.faces { display: flex; flex-wrap: wrap; gap: .4rem; }
.face { position: relative; display: grid; width: 3rem; height: 3rem; place-items: center; }
.face img { width: 100%; height: 100%; object-fit: contain; }
.face b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; font-weight: 800; }
.face--text { border-radius: .6rem; background: #e8e7e2; }
.face.is-dropped { opacity: .3; }
.face.is-dropped::after { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: var(--a-neg); content: ""; transform: rotate(-20deg); }
.multi-list { display: grid; gap: .4rem; margin-top: .9rem; }
.multi-list div { display: flex; justify-content: space-between; align-items: center; padding: .55rem .8rem; border-radius: .7rem; background: #f4f3ef; font-size: .9rem; }
.multi-list b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.result-actions { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .8rem 1rem 1rem; }
.result-actions button { display: flex; align-items: center; justify-content: center; gap: .4rem; height: 3rem; border: 0; border-radius: .85rem; font-weight: 700; }
.result-actions .primary { background: var(--a-ink); color: #fff; }
.result-actions .secondary { background: #efeee9; color: var(--a-ink); }
.nudge { margin: .9rem 0 0; padding: .8rem .9rem; border-radius: .9rem; background: #efedff; color: #2f2790; font-size: .85rem; line-height: 1.45; }
.nudge button { margin-top: .4rem; padding: 0; border: 0; background: none; color: #4b3fd1; font-weight: 800; }

/* ── Soundboard deck (Soundboard interface mode) ────────────────── */
.deck { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .6rem; border-top: 1px solid rgba(255,255,255,.07); border-radius: 1rem; background: var(--a-card); }
.deck-left { display: grid; grid-template-rows: 1fr auto; gap: .6rem; min-width: 0; }
.lcd { position: relative; overflow: hidden; padding: .6rem .7rem .55rem; border: 1px solid rgba(255,255,255,.025); border-radius: .5rem; background: #0a0f0d; box-shadow: 0 1px 0 rgba(255,255,255,.06); color: var(--a-tint); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.lcd::before { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.85), transparent 8%); content: ""; pointer-events: none; }
.lcd::after { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 38%, transparent 39%); content: ""; pointer-events: none; }
.lcd-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .5rem; font-weight: 700; letter-spacing: .1em; }
.lcd-top span { opacity: .14; transition: opacity .15s ease; } .lcd-top span.on { opacity: 1; text-shadow: 0 0 4px var(--a-tint); }
.lcd-counts { display: flex; gap: .45rem; }
.lcd-counts span { display: inline-flex; align-items: center; gap: .15rem; opacity: .3; } .lcd-counts span.on { opacity: 1; text-shadow: 0 0 4px var(--a-tint); }
.lcd-counts .icon { width: .6rem; height: .6rem; }
.lcd-readout { display: grid; gap: .7rem; margin: 1rem 0 .5rem; }
.lcd-readout > strong { font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.2; color: var(--a-tint); text-transform: uppercase; overflow-wrap: anywhere; }
.lcd-detail { display: grid; gap: .2rem; line-height: 1.45; }
.lcd-detail small { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: #c4bd9a; }
.lcd-detail span { font-size: .85rem; color: #fff1c3; overflow-wrap: anywhere; }
.lcd-event { min-height: 1.4em; font-size: .65rem; overflow-wrap: anywhere; }
.lcd-top span, .lcd-counts span { opacity: .6; }
.pad-app-label { padding: .2rem .35rem; border-radius: .3rem; background: #e9e3d8; color: #514631; font-size: .6rem; line-height: 1.2; }
.strip { display: flex; align-items: center; gap: .4rem; height: .8rem; }
.strip i { display: block; width: .8rem; height: .8rem; background: var(--a-tint); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; opacity: .45; }
.strip.live i { opacity: 1; filter: drop-shadow(0 0 2px var(--a-tint)); }
.strip .none { width: 1.1rem; height: 1.5px; background: rgba(255,213,106,.2); }
.meters { display: grid; gap: .22rem; margin-top: .35rem; }
.meter { display: grid; grid-template-columns: 1.3rem 1fr .9rem; align-items: center; gap: .35rem; font-size: .48rem; font-weight: 700; letter-spacing: .06em; }
.meter .bars { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; height: .38rem; }
.meter .bars i { border-radius: 1px; background: rgba(255,213,106,.07); }
.meter .bars i.lvl { background: rgba(255,213,106,.26); }
.meter .bars i.hot { background: var(--a-tint); box-shadow: 0 0 3px var(--a-tint); }
.meter .num { text-align: right; opacity: .45; } .meter.live .num, .meter.live .lbl { opacity: 1; } .meter .lbl { opacity: .45; }
.hw-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; height: 3.1rem; }
.hw-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; border-radius: .6rem; }
.hw-key .icon { width: 1.25rem; height: 1.25rem; }
.hw-key small { font-size: .5rem; font-weight: 800; letter-spacing: .1em; }
.hw-key .led { position: absolute; top: .45rem; right: .45rem; }
.led { display: block; width: .45rem; height: .45rem; border-radius: 50%; background: rgba(14,14,16,.14); }
.led.on { background: var(--a-tint); box-shadow: 0 0 7px var(--a-tint); }
.led.dim { background: rgba(255,213,106,.35); }
.led.neg { background: var(--a-neg); box-shadow: 0 0 7px var(--a-neg); }
.faders { display: flex; gap: .3rem; }
.fader { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: .4rem; width: 1.9rem; color: var(--a-card-ink2); }
.fader .icon { width: 1rem; height: 1rem; }
.fader-track { position: relative; width: 100%; min-height: 8.5rem; background: repeating-linear-gradient(to bottom, rgba(236,236,236,.22) 0 1px, transparent 1px calc(10% - .1px)) center / 70% calc(100% - 1.5rem) no-repeat; }
.fader-track::before { position: absolute; top: .25rem; bottom: .25rem; left: 50%; width: 6px; margin-left: -3px; border-radius: 3px; background: rgba(0,0,0,.6); content: ""; }
.fader input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ns-resize; writing-mode: vertical-lr; direction: rtl; -webkit-appearance: slider-vertical; }
.fader-cap { position: absolute; left: 50%; width: 1.65rem; height: 1rem; margin-left: -.825rem; border-radius: .25rem; background: var(--a-key); box-shadow: 0 3px 6px rgba(0,0,0,.45); pointer-events: none; }
.fader-cap::after { position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; margin: -1px 0 0 -.5rem; border-radius: 1px; background: rgba(14,14,16,.7); content: ""; }
.fader input:focus-visible + .fader-cap { outline: 2px solid var(--a-counter); outline-offset: 2px; }
.pad-panel { overflow: hidden; }
.pad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: .5rem; }
.pad { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; aspect-ratio: .95; overflow: hidden; padding: .4rem .25rem; }
.pad img { width: 42%; height: auto; pointer-events: none; user-select: none; }
.pad span { max-width: 100%; overflow: hidden; font-size: .72rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pad .led { position: absolute; top: .5rem; right: .5rem; }
.pad .lock-badge { position: absolute; top: .35rem; left: .35rem; width: .85rem; height: .85rem; opacity: .7; }
.pad.is-locked > img, .pad.is-locked > span { opacity: .42; }
.pad.is-empty { opacity: .28; box-shadow: none; }
.pad .progress { position: absolute; inset: 0; background: rgba(14,14,16,.08); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.pad.is-firing .progress { animation: padProgress var(--dur, .8s) linear forwards; }
@keyframes padProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.page-dots { display: flex; justify-content: center; gap: .35rem; height: 1.6rem; align-items: center; }
.page-dots i { width: .45rem; height: .45rem; border-radius: 4px; background: var(--a-ink4); } .page-dots i.on { width: 1.1rem; background: var(--a-ink); }

/* ── Character card (app character sheet) ───────────────────────── */
.char-card { padding: 1rem; border-radius: 1.4rem; background: rgba(255,255,255,.78); box-shadow: 0 .4rem 1.2rem rgba(60,45,20,.08); backdrop-filter: blur(6px); }
.char-head { display: flex; align-items: center; gap: .6rem; }
.char-avatar { display: grid; flex: none; width: 2.8rem; height: 2.8rem; place-items: center; border: 2px solid var(--a-ink); border-radius: 50%; background: #f7ecd2; }
.char-name { flex: 1; min-width: 0; padding: .25rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--a-ink); font-family: inherit; font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.char-name:focus { outline: 0; border-bottom-color: var(--a-counter); }
.char-level { display: flex; align-items: center; gap: .35rem; }
.char-level > div { display: grid; min-width: 2.2rem; justify-items: center; line-height: 1; }
.char-level small { color: var(--a-ink3); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.char-level output { font-size: 1.4rem; font-weight: 800; }
.mini-key { width: 2.3rem; height: 2.3rem; border-radius: .7rem; }
.mini-key .icon { width: 1.05rem; height: 1.05rem; }
.char-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin-top: .9rem; }
.char-fields label { display: grid; gap: .1rem; }
.char-fields small, .char-label { color: var(--a-ink2); font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.char-fields input { width: 100%; padding: .3rem 0; border: 0; border-bottom: 1px solid rgba(0,0,0,.12); background: none; color: var(--a-ink); font-family: inherit; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.char-fields input:focus { outline: 0; border-bottom-color: var(--a-counter); }
.char-label { display: block; margin: 1rem 0 .5rem; padding-top: .8rem; border-top: 1px solid rgba(0,0,0,.08); }
.char-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem .25rem; }
.char-stat { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .15rem; }
.char-stat .mini-key { width: 1.95rem; height: 1.95rem; border-radius: .6rem; }
.char-stat-val { display: grid; justify-items: center; line-height: 1.05; }
.char-stat-val small { font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.char-stat-val output { font-size: 1.55rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.char-stat-val span { color: var(--a-ink3); font-size: .72rem; font-weight: 700; }
.pb-hint { margin: .8rem 0 0; color: var(--a-ink2); font-size: .82rem; text-align: center; }
.char-extra { display: grid; gap: .6rem; padding: .8rem; }
.derived { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.derived > * { display: grid; gap: .1rem; padding: .5rem .55rem; border: 1px solid var(--a-card-line); border-radius: .75rem; }
.derived small { color: var(--a-card-ink3); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.derived b { font-size: 1.15rem; }
.derived input { width: 100%; padding: 0; border: 0; background: none; color: var(--a-card-ink); font-family: inherit; font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.derived input::placeholder { color: var(--a-card-ink3); }
.saves { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.saves label { display: flex; align-items: center; gap: .35rem; padding: .45rem .5rem; border: 1px solid var(--a-card-line); border-radius: .7rem; font-size: .78rem; font-weight: 700; cursor: pointer; }
.saves input { accent-color: var(--a-tint); }
.saves b { margin-left: auto; }
.sub-label { color: var(--a-card-ink3); font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.checks { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.checks button { padding: .5rem 0; border: 1px solid var(--a-card-line); border-radius: .6rem; background: rgba(255,255,255,.04); color: var(--a-card-ink); font-size: .7rem; font-weight: 800; }
.check-out { min-height: 1.4rem; margin: 0; color: var(--a-card-ink2); font-size: .82rem; text-align: center; }
.check-out b { color: var(--a-tint); }
.method-list { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.method-list button { padding: .6rem .5rem; border: 1px solid rgba(17,19,24,.1); border-radius: .8rem; background: #fff; font-size: .82rem; font-weight: 700; }
.method-list button[aria-pressed="true"] { border-color: #111318; background: #111318; color: #fff; }
.rolled { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.rolled li { padding: .45rem .5rem; border-radius: .6rem; background: #f6f4ef; font-size: .78rem; }
.rolled b { display: block; } .rolled span { color: #676b74; } .rolled s { opacity: .55; }
.notes-area { width: 100%; min-height: 6rem; padding: .7rem .8rem; border: 1px solid rgba(17,19,24,.12); border-radius: .85rem; background: #fff; font-family: inherit; font-weight: 500; font-size: .9rem; line-height: 1.5; resize: vertical; }
.import-label { position: relative; overflow: hidden; }
.import-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.print-sheet { display: none; }


@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; }
  body > *:not(main), main > *:not(.section--stage), .section--stage .wrap > *:not(.print-sheet), .console { display: none !important; }
  .section--stage { padding: 0; background: #fff; }
  .print-sheet { display: block; color: #111; font: 11pt/1.4 Georgia, serif; }
  .print-sheet header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8pt; border-bottom: 2pt solid #111; }
  .print-sheet h1 { margin: 0; font: 700 24pt/1.1 Georgia, serif; }
  .print-sheet h2 { margin: 0 0 6pt; font: 700 11pt/1.2 Georgia, serif; text-transform: uppercase; letter-spacing: .08em; }
  .print-sheet header p { margin: 4pt 0 0; }
  .ps-abilities, .ps-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6pt; margin-top: 12pt; }
  .ps-abilities div, .ps-row div { display: grid; justify-items: center; padding: 6pt 2pt; border: 1pt solid #111; border-radius: 6pt; text-align: center; }
  .ps-abilities small, .ps-row small { font-size: 7.5pt; text-transform: uppercase; }
  .ps-abilities b { font-size: 20pt; } .ps-row b { font-size: 14pt; min-height: 18pt; }
  .ps-abilities span { padding: 0 6pt; border: 1pt solid #111; border-radius: 99pt; font-size: 9pt; }
  .ps-saves, .ps-notes { margin-top: 12pt; padding: 8pt; border: 1pt solid #111; border-radius: 6pt; }
  .ps-saves { columns: 3; } .ps-saves h2 { column-span: all; } .ps-saves p { margin: 2pt 0; }
  .ps-notes p { min-height: 120pt; margin: 0; }
  .print-sheet footer { margin-top: 12pt; color: #555; font-size: 8pt; text-align: center; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mode-tile .short { display: none; }
.mode-row.has-active .mode-tile:not(.is-active) .short { display: block; }
.mode-row.has-active .mode-tile:not(.is-active) .full { display: none; }
.pad-pages { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pad-pages::-webkit-scrollbar { display: none; }
.pad-page { flex: 0 0 100%; scroll-snap-align: start; }
.pad .pad-icon { width: 42%; height: auto; stroke-width: 2.2; }
.pad-section .folder-tab .icon { width: 1rem; height: 1rem; }
.hw-key .icon { pointer-events: none; }
.page-dots button { width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 4px; background: var(--a-ink4); transition: width .18s ease, background .18s ease; }
.page-dots button.on { width: 1.1rem; background: var(--a-ink); }
.app .key { color: var(--a-ink); }

.char-head { min-width: 0; } .char-name { min-width: 0; }

.lcd-top > div:first-child { white-space: nowrap; overflow: hidden; }

@media (max-width: 400px) { .dash { grid-template-columns: 1fr 3.8rem; } .dice-grid { gap: .45rem; padding: .55rem; } .char-stats { grid-template-columns: repeat(2, 1fr); } .folder-tab { font-size: .6rem !important; } }
/* ── Tool console: one panel per tool. A web toolbar on top, the app's own
   widgets as the main area, and a companion column for results. ────── */
.console { overflow: hidden; border: 1px solid rgba(17,19,24,.07); border-radius: 2rem; background: var(--a-bg); box-shadow: 0 2.4rem 4.8rem -1.6rem rgba(60,45,20,.35), 0 .6rem 1.4rem rgba(60,45,20,.08); }
.console-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(17,19,24,.07); background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.bar-label { margin-right: .2rem; color: var(--a-ink3); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid rgba(17,19,24,.1); border-radius: 999px; background: #fff; color: var(--a-ink) !important; font-size: .84rem !important; font-weight: 600 !important; white-space: nowrap; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.chip:hover { border-color: rgba(17,19,24,.3); box-shadow: 0 .35rem .8rem rgba(60,45,20,.1); transform: translateY(-1px); }
.chip code { color: #4b3fd1; font: 700 .76rem/1 ui-monospace, Consolas, monospace; }
.chip[aria-pressed="true"] { border-color: var(--a-ink); background: var(--a-ink); color: #fff !important; }
.chip .icon { width: 1rem; height: 1rem; }
.icon-chip { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; padding: 0; border: 1px solid rgba(17,19,24,.1); border-radius: 50%; background: #fff; color: var(--a-ink) !important; }
.icon-chip:hover { border-color: rgba(17,19,24,.3); }
.icon-chip[aria-pressed="false"] { color: var(--a-ink4) !important; }
.icon-chip .icon { width: 1.1rem; height: 1.1rem; }
.notation { display: flex; align-items: center; gap: .3rem; padding: .25rem .25rem .25rem .9rem; border: 1px solid rgba(17,19,24,.12); border-radius: 999px; background: #fff; }
.notation:focus-within { border-color: #4b3fd1; box-shadow: 0 0 0 3px rgba(75,63,209,.14); }
.notation input { width: 9.5rem; min-width: 0; padding: .35rem 0; border: 0; background: none; color: var(--a-ink); font: 600 .9rem/1.2 ui-monospace, Consolas, monospace; }
.notation input:focus { outline: 0; }
.notation button { height: 2rem; padding: 0 .95rem; border: 0; border-radius: 999px; background: var(--a-ink); color: #fff !important; font-size: .82rem !important; font-weight: 700 !important; }
.notation-error { flex-basis: 100%; margin: 0; color: #b3261e; font-size: .8rem; }
.console-main { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
.console-app { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .75rem; min-width: 0; }
.console-side { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .9rem; min-width: 0; }
@media (max-width: 900px) {
  .console { border-radius: 1.6rem; }
  .console-main { grid-template-columns: minmax(0, 1fr); padding: .9rem; }
  .console-bar { padding: .85rem .9rem; }
  .console-bar .bar-group--scroll { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -.9rem; padding: 0 .9rem; }
  .console-bar .bar-group--scroll::-webkit-scrollbar { display: none; }
  .notation { flex: 1; } .notation input { width: 100%; }
}

/* Expression strip above the dice (the app's live readout). */
.readout { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: .15rem .3rem 0; }
.readout p { margin: 0; min-width: 0; overflow-x: auto; padding-bottom: .25rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; scrollbar-width: thin; }
.readout dl { display: flex; flex: none; gap: .75rem; margin: 0; color: var(--a-ink3); font-size: .75rem; }
.readout dt { display: inline; font-weight: 700; } .readout dd { display: inline; margin: 0 0 0 .2rem; color: var(--a-ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Modifier: the app's snap wheel on touch screens, a stepper with a mouse. */
.mod-stepper { display: none; flex: 1; grid-template-rows: 1fr auto 1fr; gap: .45rem; padding: .45rem; }
.mod-stepper button { display: grid; place-items: center; border: 0; border-radius: .7rem; background: var(--a-card-alt); color: var(--a-card-ink) !important; transition: background .15s ease; }
.mod-stepper button:hover { background: #5a5a62; }
.mod-stepper input { width: 100%; padding: .5rem 0; border: 1px solid rgba(255,255,255,.14); border-radius: .7rem; background: rgba(0,0,0,.25); color: #fff; font-family: inherit; font-size: 1.25rem; font-weight: 800; text-align: center; }
.mod-stepper input:focus { outline: 2px solid var(--a-counter); }
@media (hover: hover) and (pointer: fine) { .wheel-wrap { display: none; } .mod-stepper { display: grid; } .key:hover { box-shadow: 0 7px 14px rgba(0,0,0,.28); transform: translateY(-1px); } .key:active, .key.is-down { transform: translateY(2px); box-shadow: var(--a-key-shadow-down); } }

/* Result panel: the app's roll dialog, always in view. */
.result-panel { display: flex; flex-direction: column; min-height: 23rem; overflow: hidden; border: 1px solid rgba(0,0,0,.06); border-radius: 1.3rem; background: #fff; box-shadow: 0 .6rem 1.6rem rgba(60,45,20,.08); scroll-margin: 6rem; }
.result-panel .result-head { display: flex; align-items: center; justify-content: space-between; padding: .65rem .65rem .65rem 1.1rem; }
.again-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border: 0; border-radius: 999px; background: var(--a-ink); color: #fff !important; font-size: .78rem !important; font-weight: 700 !important; letter-spacing: 0; }
.again-btn .icon { width: .95rem; height: .95rem; }
.result-empty { display: grid; flex: 1; place-content: center; justify-items: center; gap: .5rem; padding: 2rem 1.5rem; text-align: center; }
.result-empty img { width: 3.5rem; opacity: .16; }
.result-empty p { margin: 0; color: var(--a-ink3); font-size: .92rem; line-height: 1.5; }
.result-empty b { color: var(--a-ink2); }
.result-panel .result-rolling { flex: 1; align-content: center; }
.result-panel .result-scroll { flex: 1; }
.result-panel .hero-total { font-size: 3.8rem; }
.history-card { padding: .95rem 1rem; border-radius: 1.2rem; background: var(--a-card); color: var(--a-card-ink); }
.history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.history-head b { font-size: 1rem; }
.history-card .drawer-count { background: rgba(255,255,255,.1); }
.history-card .drawer-list { max-height: 13rem; padding: 0; }
.history-card .drawer-list li { background: rgba(255,255,255,.06); }
.history-card .drawer-list .h-dice { color: var(--a-card-ink3); }
.history-card .drawer-empty { margin: 0 0 .5rem; padding: 0; color: var(--a-card-ink3); font-size: .88rem; }
.app-link { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; color: var(--a-tint) !important; font-size: .8rem !important; font-weight: 700 !important; }
.app-link .icon { width: .9rem; height: .9rem; }

/* Soundboard console: deck on the left, pad groups on the right. */
[data-soundboard] .console-main { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
[data-soundboard] .deck { grid-template-columns: 1fr; align-self: start; }
[data-soundboard] .faders { justify-content: space-around; }
[data-soundboard] .fader-track { min-height: 7rem; }
.pad-panel { padding: .8rem; border-radius: 0 1.2rem 1.2rem 1.2rem; }
.pad-groups { display: grid; gap: .25rem; }
.pad-group-title { display: none; align-items: center; gap: .45rem; margin: .8rem 0 .55rem .15rem; color: var(--a-card-ink2); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pad-group-title:first-child { margin-top: .1rem; }
.pad-group-title .icon { width: 1rem; height: 1rem; }
.pads { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .5rem; }
.pads .pad { aspect-ratio: 1; }
.pads .pad img { width: 40%; }
@media (min-width: 901px) {
  [data-soundboard] .folder-tabs { display: none; }
  .pad-panel { border-radius: 1.2rem; }
  .pad-group-title { display: flex; }
  .app .pads[hidden] { display: grid !important; }
}
@media (max-width: 900px) {
  [data-soundboard] .console-main { grid-template-columns: minmax(0, 1fr); }
  .pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Character console: the app's character card, then combat and saves. */
[data-character-tool] .console-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
[data-character-tool] .char-card { padding: 1.3rem; }
[data-character-tool] .char-card { container-type: inline-size; }
.notes-card { display: grid; gap: .5rem; padding: .9rem 1rem 1rem; border-radius: 1.2rem; background: rgba(255,255,255,.7); }
.notes-card label { color: var(--a-ink2); font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.save-status { margin: 0; color: var(--a-ink3); font-size: .8rem; }
.rolled { grid-template-columns: repeat(6, 1fr); margin: .6rem 0 0; }
@media (max-width: 900px) { [data-character-tool] .console-main { grid-template-columns: minmax(0, 1fr); } .rolled { grid-template-columns: repeat(3, 1fr); } }
.drawer-count { display: grid; min-width: 1.9rem; height: 1.9rem; place-items: center; padding: 0 .4rem; border-radius: 999px; background: rgba(0,0,0,.1); font-weight: 700; font-variant-numeric: tabular-nums; }
.drawer-list { margin: 0 0 .7rem; overflow-y: auto; list-style: none; }
.drawer-list li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; margin-bottom: .4rem; padding: .6rem .8rem; border-radius: .8rem; }
.drawer-list .h-expr { font-weight: 700; } .drawer-list .h-dice { grid-column: 1; font-size: .78rem; }
.drawer-list .h-dice s { opacity: .55; }
.drawer-list .h-total { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.icon-chip.is-done { border-color: #1f8a4f; color: #1f8a4f !important; }
.roll-key--text { font-size: 1.15rem !important; letter-spacing: .12em; }

/* Content stays inside its track, including long expressions and translated labels. */
.console-main > *, .console-app > *, .console-side > *, .dash > *,
.hero-top > *, .derived > *, .char-fields > *, .char-stats > *,
.drawer-list li > *, .pad-groups > * { min-width: 0; }
.dash { grid-template-columns: minmax(0, 1fr) 4.4rem; }
.dice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.die-key { width: 100%; }
.app button:disabled { cursor: default; opacity: .45; }
.app .chip, .app .icon-chip, .app .mini-key, .app .die-minus,
.app .checks button { min-height: 2.75rem; }
.app .icon-chip { flex-shrink: 0; width: 2.75rem; }
.app .die-minus { width: 2rem; min-height: 2rem; height: 2rem; }
.folder-tabs { height: auto; min-height: 2.75rem; }
.folder-tab { padding-block: .6rem; overflow-wrap: anywhere; }
.notation { min-width: 0; max-width: 100%; }
.notation button { flex-shrink: 0; min-height: 2.5rem; }
.readout dl { flex-wrap: wrap; gap: .25rem .5rem; }
.hero-foot { flex-wrap: wrap; }
.hero-foot p, .result-rolling b, .h-expr, .h-dice, .multi-list span,
.check-out, .pb-hint, .save-status { overflow-wrap: anywhere; }
.hero-foot p { min-width: 0; flex-basis: 70%; }
.mode-badge, .multi-list b { flex-shrink: 0; }
.multi-list div { gap: .75rem; }
.result-panel { max-height: 36rem; }
.result-scroll { min-height: 0; overscroll-behavior-y: contain; }
.mode-row.has-active .mode-tile:not(.is-active), .mode-tile.is-active { flex: 1; }
.mode-tile.is-active { display: flex; background: var(--a-card-ink); }
.mode-tile.is-active small { color: var(--a-card); }
.mode-row.has-active .mode-tile:not(.is-active) .short { display: none; }
.mode-row.has-active .mode-tile:not(.is-active) .full { display: block; }
.mode-adjust { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; align-items: center; gap: .5rem; margin-top: .6rem; }
.mode-adjust button { min-height: 2.75rem; border: 1px solid var(--a-card-line); border-radius: .6rem; background: var(--a-card-alt); color: var(--a-card-ink); }
.mode-adjust output { text-align: center; font-size: .85rem; overflow-wrap: anywhere; }
.char-fields, .derived, .saves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.char-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.char-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.char-stat { grid-template-columns: auto minmax(0, 1fr) auto; }
.char-stat .mini-key { width: 2rem; }
.rolled { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.char-level { flex-shrink: 0; }
.saves label { flex-wrap: wrap; min-height: 2.75rem; }
.saves input { width: 1rem; height: 1rem; margin: 0; }
.notes-area { max-height: 24rem; }
.pad span { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; }
.pad.is-loading { opacity: .65; }
.pad.is-locked > .pad-icon, .pad.is-locked > span { opacity: .7; }
.pads .pad { aspect-ratio: auto; min-height: 7.25rem; padding: .65rem .35rem; }
.pads .pad img, .pads .pad .pad-icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.pads .pad > span:not(.led), .pad-app-label { flex-shrink: 0; }
.fader { width: 2.75rem; }
.fader-cap { width: 2rem; margin-left: -1rem; }
.import-label:focus-within { outline: 3px solid var(--a-counter); outline-offset: 2px; }
.tool-status { margin: 0; padding: .6rem 1.25rem 0; font-size: .85rem; color: var(--a-ink2); overflow-wrap: anywhere; }
.tool-status:empty { display: none; }
@media (max-width: 600px) {
  .char-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .char-head { flex-wrap: wrap; }
  .char-name { flex-basis: calc(100% - 3.5rem); }
  .char-level { margin-left: auto; }
  .pads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .console-bar > .bar-group:not(.bar-group--scroll) { width: 100%; }
  .console-bar .bar-group--scroll .chip { flex-shrink: 0; }
  .hero-top { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .math { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-panel .hero-total { font-size: clamp(2rem, 10vw, 3.8rem); }
}
@media (max-width: 400px) {
  .pads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-soundboard] .folder-tab .icon { display: none; }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .wheel-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); }
  .wheel-head { display: grid; place-content: center; padding: .4rem; }
  .wheel-wrap { display: none; }
  .mod-stepper { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; grid-template-rows: 1fr; }
  .mod-stepper button { min-height: 2.75rem; }
  .console-main { padding: .65rem; gap: .9rem; }
  [data-character-tool] .char-card { padding: .85rem; }
  .derived, .saves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-tile { font-size: .65rem; }
}
@container (max-width: 420px) {
  .char-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}