/* Parchment — aged paper + ink + a single oxblood accent (SPEC §8.3). Bold in one place, quiet everywhere else. System font stack, no CDN. */ :root { /* Default "5e Sheet" scheme — warm cream paper, near-black ink, boxed dark rules, single oxblood accent. Alternate schemes override these below via [data-theme=...] on . */ --ink: #221c12; --paper: #ece3cf; --card: #fbf6ea; --line: #c2b49a; --muted: #857a63; --oxblood: #7a2b2b; --surround: #c7ba9e; /* area around the phone frame */ --sheen: rgba(255,255,255,0.5); /* top gloss inside the frame */ /* Heavier, darker box border — derived from ink so it adapts per theme. */ --border: color-mix(in srgb, var(--ink) 26%, var(--line)); --radius: 9px; --gap: 10px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Serif display face for the printed-character-sheet feel (big numbers, headings, dice). Self-hosted system serifs only — no web fonts. */ --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; } /* --- Alternate colour schemes (user-selectable in Settings) --------------- */ [data-theme="midnight"] { --ink: #ece6da; --paper: #221d19; --card: #2c2622; --line: #42382f; --muted: #9c8f7f; --oxblood: #d0704a; --surround: #0e0b09; --sheen: rgba(255,255,255,0.04); } [data-theme="forest"] { --ink: #212a1d; --paper: #e7ece0; --card: #f7faf2; --line: #bac6aa; --muted: #78846b; --oxblood: #436f3c; --surround: #c7cfbe; } [data-theme="ocean"] { --ink: #1c2530; --paper: #e5ecf0; --card: #f4f9fb; --line: #a9bac6; --muted: #6c7c86; --oxblood: #256b7a; --surround: #bcc7cf; } [data-theme="rose"] { --ink: #2c2125; --paper: #f3e8eb; --card: #fdf7f9; --line: #d7bac2; --muted: #8a757e; --oxblood: #a63b5e; --surround: #dcc7cc; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } body { font-family: var(--font); color: var(--ink); background: var(--surround); overscroll-behavior: none; } button { font-family: inherit; color: inherit; cursor: pointer; touch-action: manipulation; /* kill the 300ms tap delay / double-tap zoom */ -webkit-user-select: none; user-select: none; /* no text/emoji selection on long-press */ -webkit-touch-callout: none; /* no iOS long-press callout menu */ } /* Tappable non-button elements get the same fast-tap behaviour. */ .wdg.tappable, .charrow, .tab { touch-action: manipulation; } input, textarea, select { font-family: inherit; font-size: 16px; } #app { height: 100%; } /* Phone frame — on wide screens, show a centered device; on a phone, fill. */ .frame { position: relative; max-width: 460px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; background: var(--paper); background-image: radial-gradient(120% 120% at 50% 0%, var(--sheen), transparent 60%); box-shadow: 0 10px 40px rgba(0,0,0,0.25); overflow: hidden; } @media (min-width: 480px) { body { padding: 18px 0; } #app { height: calc(100% - 36px); } .frame { border-radius: 30px; border: 1px solid var(--line); } } /* Faint graph-paper grid: only in edit mode, fades in play mode (§8.3). */ .sheet { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--gap); scroll-behavior: smooth; } .sheet::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; opacity: 0; transition: opacity 0.4s ease; } .frame.edit .sheet::before { opacity: 0.35; } /* App bar */ .appbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-top)) 14px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: linear-gradient(var(--paper), rgba(239,233,221,0.85)); backdrop-filter: blur(6px); } .appbar .name { font-family: var(--display); flex: 1; font-weight: 650; font-size: 18px; letter-spacing: 0.2px; } .appbar .name .sub { display: block; font-weight: 400; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; } .iconbtn { border: 1px solid var(--line); background: var(--card); width: 44px; height: 44px; border-radius: var(--radius); font-size: 18px; display: grid; place-items: center; padding: 0; } .iconbtn:active { transform: scale(0.94); } /* Play/Edit toggle */ .toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--card); overflow: hidden; } .toggle button { border: 0; background: transparent; padding: 0 16px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--muted); } .toggle button.on { background: var(--oxblood); color: #fff; } /* Page tabs + dots */ .pagebar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; } .tab { flex: none; display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--line); background: var(--card); padding: 0 16px; border-radius: 999px; font-size: 14px; color: var(--muted); } .tab.on { color: var(--ink); border-color: var(--ink); font-weight: 600; } .tab.add { color: var(--oxblood); border-style: dashed; } .dots { display: flex; gap: 6px; justify-content: center; padding: 8px 0 4px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .dot.on { background: var(--oxblood); } /* Widget grid — 4-column fine grid (§8.1). Columns 1–4 (1 = half of the old "small"); rows are a growable floor so tall faces never clip. */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(40px, auto); gap: var(--gap); align-content: start; } .wdg { position: relative; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); min-height: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 1px 0 rgba(0,0,0,0.03); overflow: hidden; } .wdg.tappable { cursor: pointer; } .wdg.tappable:active { transform: scale(0.985); } .wdg .wl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); } .wdg .wv { font-family: var(--display); font-size: 30px; font-weight: 650; line-height: 1.05; margin-top: 2px; } .wdg .wv.text { font-size: 18px; font-weight: 550; } .wdg .ws { font-size: 12px; color: var(--muted); margin-top: 2px; } .wdg .marker { position: absolute; top: 8px; right: 10px; font-size: 13px; color: var(--oxblood); } /* Proficiency dot (official-sheet style): hollow ring / filled when proficient. */ .wdg.has-prof .wl { padding-left: 22px; } .wdg .profdot { position: absolute; top: 9px; left: 8px; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid var(--border); background: transparent; } .wdg .profdot.on { background: var(--oxblood); border-color: var(--oxblood); box-shadow: inset 0 0 0 2px var(--card); } .wdg .profdot:active { transform: scale(0.88); } .wdg .profdot::after { content: ""; position: absolute; inset: -11px; } /* ~40px touch target */ .wdg .wv.err { color: var(--oxblood); font-size: 20px; } .wdg.num input { width: 100%; border: 0; background: transparent; font-size: 30px; font-weight: 650; color: var(--ink); padding: 0; margin-top: 2px; -moz-appearance: textfield; } .wdg.num input:focus { outline: none; border-bottom: 2px solid var(--oxblood); } .wdg .editnum { position: absolute; bottom: 6px; right: 8px; border: 1px solid var(--line); background: var(--paper); border-radius: 6px; font-size: 13px; line-height: 1; padding: 6px 9px; color: var(--muted); } .wdg .editnum:active { transform: scale(0.92); } .wdg input.inlinenum { width: 100%; border: 0; border-bottom: 2px solid var(--oxblood); background: transparent; font-size: 30px; font-weight: 650; color: var(--ink); padding: 0; margin-top: 2px; -moz-appearance: textfield; } .wdg input.inlinenum:focus { outline: none; } .wdg textarea { width: 100%; border: 0; background: transparent; resize: none; color: var(--ink); font-size: 15px; } .wdg textarea:focus { outline: none; } .wdg.label { background: transparent; border: 0; box-shadow: none; min-height: 0; padding: 12px 4px 2px; justify-content: end; } .wdg.label .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--oxblood); font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 6px; } /* Edit-mode widget chrome — index cards. Move handle centered; a gear and a resize icon sit in the corners. Size is set on the card, not in a menu. */ .frame.edit .wdg { border-style: dashed; overflow: visible; } .frame.edit .wdg.editing { min-height: 52px; } .wdg .drag.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; color: var(--oxblood); font-size: 20px; line-height: 1; cursor: grab; touch-action: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,0.15); } .wdg .drag.center:active { cursor: grabbing; transform: translate(-50%, -50%) scale(0.92); } .wdg .wbtn { position: absolute; z-index: 3; width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 14px; display: grid; place-items: center; line-height: 1; } .wdg .wbtn.cfg { top: 4px; right: 4px; } .wdg .wbtn.rz { top: 4px; left: 4px; } .wdg .wbtn.rz.on { background: var(--oxblood); color: #fff; border-color: var(--oxblood); } .wdg .wbtn:active { transform: scale(0.9); } /* Invisible hit-area expanders so the small corner affordances hit ~44px on touch. */ .wdg .editnum::after, .wdg .wbtn::after { content: ""; position: absolute; inset: -8px; } .wdg.dragging { opacity: 0.4; } .wdg.dragover { outline: 2px solid var(--oxblood); outline-offset: 1px; } .wdg.resizing { outline: 2px dashed var(--oxblood); outline-offset: 2px; } /* Bottom-right corner grip shown while a card is in resize mode. */ .wdg .resizegrip { position: absolute; bottom: -2px; right: -2px; width: 26px; height: 26px; z-index: 4; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 46%, var(--oxblood) 46%, var(--oxblood) 60%, transparent 60%, transparent 74%, var(--oxblood) 74%, var(--oxblood) 88%, transparent 88%); border-bottom-right-radius: var(--radius); } .wdg .resizegrip::after { content: ""; position: absolute; inset: -10px; } .addtile { grid-column: span 4; border: 1.5px dashed var(--oxblood); background: transparent; border-radius: var(--radius); color: var(--oxblood); font-weight: 600; padding: 14px; font-size: 14px; } /* FAB */ .fab { position: absolute; right: 16px; bottom: 16px; z-index: 5; border: 0; background: var(--oxblood); color: #fff; border-radius: 999px; padding: 14px 18px; font-weight: 650; font-size: 14px; box-shadow: 0 6px 18px rgba(122,43,43,0.4); } /* Overlays / bottom sheets */ .scrim { position: fixed; inset: 0; background: rgba(30,26,22,0.5); display: grid; place-items: end center; z-index: 20; animation: fade 0.15s ease; } .scrim.center { place-items: center; } @keyframes fade { from { opacity: 0; } } .sheetcard { width: 100%; max-width: 460px; background: var(--paper); border-radius: 18px 18px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(0,0,0,0.3); animation: rise 0.2s ease; max-height: 88%; overflow-y: auto; } .scrim.center .sheetcard { border-radius: 18px; margin: 16px; } /* Suppress the entrance animation on re-renders (only animate first mount). */ .scrim.no-anim, .scrim.no-anim .sheetcard { animation: none; } @keyframes rise { from { transform: translateY(30px); } } .sheetcard h2 { font-family: var(--display); margin: 0 0 4px; font-size: 18px; } .sheetcard h2 + .desc { color: var(--muted); font-size: 13px; margin: 0 0 14px; } /* Roll result */ .rollbig { font-family: var(--display); font-size: 52px; font-weight: 700; text-align: center; color: var(--oxblood); margin: 4px 0 8px; min-height: 56px; font-variant-numeric: tabular-nums; transition: opacity 0.15s ease; } .rollbig.rolling { opacity: 0.4; } .rollbreak { font-family: var(--mono); text-align: center; font-size: 15px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; transition: opacity 0.25s ease; } .rollbreak.pending { opacity: 0; } .rollbreak .op { color: var(--muted); } /* Dice tray + tumbling dice (cosmetic; the value is the engine's real roll) */ .dice-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; min-height: 60px; margin: 12px 0 6px; } .die { width: 56px; height: 56px; border-radius: 14px; position: relative; display: grid; place-items: center; background: var(--card); border: 2.5px solid var(--oxblood); color: var(--ink); font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,0.12); /* flat, single soft shadow */ } .die .dieface { font-family: var(--display); font-size: 25px; font-variant-numeric: tabular-nums; line-height: 1; } .die .dielabel { position: absolute; bottom: 3px; right: 6px; font-size: 9px; font-weight: 700; color: var(--muted); } .die.rolling { animation: die-wiggle 0.32s ease-in-out infinite; } .die.settle { animation: die-pop 0.28s ease; } @keyframes die-wiggle { /* quick flat jitter, like the Google dice roller */ 0% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(-12deg) translateY(-3px); } 40% { transform: rotate(10deg) translateY(0); } 60% { transform: rotate(-7deg) translateY(-2px); } 80% { transform: rotate(5deg) translateY(0); } 100% { transform: rotate(0deg) translateY(0); } } @keyframes die-pop { 0% { transform: scale(0.82); } 60% { transform: scale(1.13); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .die.rolling { animation: none; } } /* Appearance / theme picker */ .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } .theme-opt { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 10px; min-height: 60px; } .theme-opt.on { border-color: var(--oxblood); box-shadow: 0 0 0 1px var(--oxblood); } .theme-opt:active { transform: scale(0.98); } .theme-preview { flex: none; width: 40px; height: 40px; border-radius: 9px; overflow: hidden; display: flex; border: 1px solid rgba(0,0,0,0.12); } .theme-preview i { flex: 1; } .theme-nm { font-weight: 600; font-size: 14px; } .theme-opt .chk { margin-left: auto; color: var(--oxblood); font-weight: 700; } /* Settings toggle switch */ .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .switch { flex: none; width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); position: relative; padding: 0; transition: background 0.15s ease, border-color 0.15s ease; } .switch .knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: left 0.16s ease, background 0.16s ease; } .switch.on { background: var(--oxblood); border-color: var(--oxblood); } .switch.on .knob { left: 24px; background: #fff; } /* Detail overlay — the value shown big */ .detail-val { font-family: var(--display); font-size: 42px; font-weight: 700; text-align: center; color: var(--oxblood); margin: 4px 0 10px; font-variant-numeric: tabular-nums; word-break: break-word; } .detail-val.err { font-size: 24px; } /* Weapon / multi-roll face: a computed summary per roll (auto-updating) */ .rollrows { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .rollrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rollrow .rn { font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); font-weight: 700; } .rollrow .rp { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .detail-rolls { margin: 6px 0 12px; gap: 8px; } .detail-rolls .rn { font-size: 12px; } .detail-rolls .rp { font-size: 22px; } /* Stacked action buttons (detail: one Roll button per roll, then Close) */ .btncol { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .btncol .btn { flex: none; width: 100%; } /* Rolls repeater in the value editor */ .rolledit { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; } .rolledit .rn-in { flex: 0 0 32%; width: auto; } .rolledit .re-in { flex: 1; width: auto; } .rolledit .rrm { flex: none; width: 40px; height: 44px; padding: 0; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); color: var(--oxblood); font-size: 20px; line-height: 1; } /* Classic 5e ability box: big signed modifier + editable score pill */ .wdg.statface { align-items: center; text-align: center; } .wdg.statface .wl { align-self: center; } .statmod { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; margin: 2px 0 8px; } .statmod.err { color: var(--oxblood); font-size: 22px; } .statscore { border: 1.5px solid var(--border); background: var(--paper); border-radius: 999px; min-width: 48px; height: 34px; padding: 0 12px; font-family: var(--display); font-size: 17px; font-weight: 650; color: var(--ink); display: inline-grid; place-items: center; } .statscore:active { transform: scale(0.95); } .statscore.static:active { transform: none; } .statface input.inlinenum { width: 72px; text-align: center; font-size: 22px; border-bottom: 2px solid var(--oxblood); margin: 0 auto; } /* Live-editable single-line text face (editable-in-play) */ .wdg input.inlinetext-live { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; font-family: var(--display); font-size: 18px; font-weight: 550; color: var(--ink); padding: 2px 0; margin-top: 2px; } .wdg input.inlinetext-live:focus { outline: none; border-bottom-color: var(--oxblood); } /* New-character start list + guided builder */ .startlist button { align-items: flex-start; } .startlist .opt-t { font-weight: 650; font-size: 15px; } .startlist .opt-d { font-size: 12px; color: var(--muted); margin-top: 2px; } .wiz-steps { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; } .wiz-step { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; } .wiz-step.on { color: #fff; background: var(--oxblood); border-color: var(--oxblood); } .wiz-step.done { color: var(--oxblood); border-color: var(--oxblood); } .class-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .class-grid button { min-height: 42px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px; } .class-grid button.on { background: var(--oxblood); color: #fff; border-color: var(--oxblood); } .abrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); } .abrow .ab-l { flex: 0 0 40px; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; } .abrow .ab-v { flex: 0 0 34px; text-align: center; font-family: var(--display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .abrow .ab-m { flex: 1; text-align: right; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--oxblood); } .abrow .step { flex: none; } .review { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 4px 12px; margin: 6px 0 12px; } .rev-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); } .rev-row:last-child { border-bottom: 0; } .rev-k { flex: 0 0 96px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); align-self: center; } .rev-v { flex: 1; font-weight: 600; font-size: 14px; } input[type=range] { accent-color: var(--oxblood); width: 100%; min-height: 32px; } .abrow .step, .flexrow .step { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; font-size: 18px; line-height: 1; color: var(--oxblood); font-weight: 700; padding: 0; } .abrow .step:disabled, .flexrow .step:disabled { opacity: 0.35; } .abrow .ab-bonus { margin-left: auto; flex: 0 0 auto; min-width: 22px; text-align: right; font-size: 12px; color: var(--oxblood); font-weight: 700; } .abrow .ab-total { flex: 0 0 auto; min-width: 44px; text-align: right; font-family: var(--display); font-size: 17px; font-weight: 700; } .abrow .ab-m { flex: 0 0 auto; min-width: 30px; } /* Race/species & background pick lists */ .pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 54vh; overflow-y: auto; margin-bottom: 4px; } .pick { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 10px 12px; } .pick.on { border-color: var(--oxblood); box-shadow: 0 0 0 1px var(--oxblood); } .pick-t { font-weight: 650; font-size: 15px; } .pick-d { font-size: 12px; color: var(--muted); margin-top: 2px; } /* Proficiency picker */ .prof-note { font-size: 13px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; margin-bottom: 8px; } .pick-sec { margin: 14px 0; } .pick-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: 700; } .pick-left { color: var(--oxblood); } .skill-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--muted); } .chip.on { background: var(--oxblood); color: #fff; border-color: var(--oxblood); } .chip:disabled { opacity: 0.4; } .chip.locked { background: color-mix(in srgb, var(--oxblood) 14%, var(--card)); color: var(--oxblood); border-color: var(--oxblood); opacity: 1; } /* Flexible ability boost allocator */ .flex-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-top: 12px; background: color-mix(in srgb, var(--oxblood) 6%, var(--card)); } .flex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 8px; } .flexrow { display: flex; align-items: center; gap: 6px; } .flexrow .ab-l { flex: 1; } .flexrow .ab-v { flex: 0 0 30px; text-align: center; font-size: 15px; } /* −/+ stepper for editable numbers (HP etc.) */ .wdg .steprow { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .wdg .steprow input { flex: 1; width: auto; text-align: center; } .wdg .step { flex: none; width: 42px; height: 44px; border: 1.5px solid var(--border); background: var(--paper); border-radius: 8px; font-size: 22px; line-height: 1; color: var(--oxblood); font-weight: 700; } .wdg .step:active { transform: scale(0.92); } /* Lighter edit affordance (ghost icon, not a boxed button) */ .wdg .editnum { border: 0; background: transparent; padding: 5px; font-size: 14px; color: var(--muted); opacity: 0.55; } .wdg .editnum:active { opacity: 1; transform: none; } .wdg input.inlinetext { width: 100%; border: 0; border-bottom: 2px solid var(--oxblood); background: transparent; font-size: 18px; color: var(--ink); padding: 0; margin-top: 2px; } .wdg input.inlinetext:focus { outline: none; } /* Editable page tab (tap for options in edit mode) */ .tab.editable::after { content: " ⋯"; opacity: 0.55; } /* Roll mode line + roll log */ .rollmode { text-align: center; font-family: var(--mono); } .roll-log { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin: 6px 0 12px; } .log-row { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 8px 10px; } .log-hd { display: flex; align-items: baseline; gap: 8px; } .log-label { font-weight: 650; font-size: 14px; } .log-mode { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: #fff; background: var(--oxblood); border-radius: 4px; padding: 1px 5px; align-self: center; } .log-total { margin-left: auto; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--oxblood); } .log-break { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-word; } .menu-list button:disabled { opacity: 0.4; } /* Detail overlay */ .formula { font-family: var(--mono); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; font-size: 15px; } .formula .err { color: var(--oxblood); } /* Forms */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 5px; } .field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--oxblood); } .field input.locked { background: #efeae0; color: var(--muted); font-family: var(--mono); } .field .hint { font-size: 11px; color: var(--muted); margin-top: 4px; } .field .hint.err { color: var(--oxblood); } .seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .seg button { flex: 1; border: 0; background: var(--card); min-height: 44px; padding: 8px; font-size: 14px; color: var(--muted); } .seg button.on { background: var(--oxblood); color: #fff; font-weight: 600; } .seg.small button { min-height: 42px; padding: 6px; font-size: 12px; } .btnrow { display: flex; gap: 10px; margin-top: 8px; } .btn { flex: 1; min-height: 48px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 12px; font-weight: 600; font-size: 15px; } .btn:active { transform: scale(0.98); } .btn.primary { background: var(--oxblood); color: #fff; border-color: var(--oxblood); } .btn.ghost { background: transparent; } .btn.danger { color: var(--oxblood); } .btn.destruct { background: var(--oxblood); color: #fff; border-color: var(--oxblood); } /* Character list (home) */ .home { padding: 14px; overflow-y: auto; flex: 1; } .home-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .home h1 { font-family: var(--display); font-size: 22px; margin: 6px 4px 2px; } .home .tagline { color: var(--muted); font-size: 13px; margin: 0 4px 16px; } .warnbanner { background: color-mix(in srgb, var(--oxblood) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--oxblood) 30%, var(--line)); color: color-mix(in srgb, var(--ink) 72%, var(--oxblood)); border-radius: var(--radius); padding: 10px 12px; font-size: 12px; margin-bottom: 14px; display: flex; gap: 8px; } .charrow { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; } .charrow.active { border-color: var(--oxblood); } .charrow .activedot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; } .charrow.active .activedot { background: var(--oxblood); } .charrow .cmeta { flex: 1; } .charrow .cname { font-weight: 650; font-size: 16px; } .charrow .csub { color: var(--muted); font-size: 12px; margin-top: 2px; } .charrow .cgo { color: var(--muted); font-size: 18px; } .charrow .rowdel { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; font-size: 16px; color: var(--muted); display: grid; place-items: center; padding: 0; } .charrow .rowdel:active { transform: scale(0.92); } .menu-list { display: flex; flex-direction: column; } .menu-list button { text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 14px 4px; font-size: 15px; display: flex; gap: 12px; align-items: center; } .menu-list button:last-child { border-bottom: 0; } .menu-list .mi { width: 22px; text-align: center; } .pill { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--muted); } .empty { text-align: center; color: var(--muted); padding: 40px 20px; } /* Privacy page */ .privsec { margin-top: 16px; } .privsec h3 { font-size: 14px; font-weight: 650; margin: 0 0 4px; color: var(--ink); } .privsec p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; word-break: break-word; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 50; animation: fade 0.2s ease; }