:root{--color-bg: oklch(16% .012 60);--color-bg-soft: oklch(21% .016 55);--color-surface: oklch(25% .02 50);--color-text: oklch(88% .02 70);--color-muted: oklch(64% .02 70);--color-ember: oklch(70% .16 55);--color-ember-dim: oklch(48% .1 50);--color-blood: oklch(48% .16 25);--font-serif: "Georgia", "Times New Roman", serif;--font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;--space: clamp(.75rem, .5rem + 1vw, 1.25rem);--radius: 10px;--duration: .28s;--ease: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box;margin:0}html,body,#app{height:100%}body{background:radial-gradient(120% 80% at 50% 0%,var(--color-bg-soft),var(--color-bg) 70%) fixed;color:var(--color-text);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}.screen{display:flex;flex-direction:column;height:100%;max-width:720px;margin:0 auto}.screen--start{justify-content:center;gap:var(--space);padding:var(--space);text-align:center}.title{font-family:var(--font-serif);font-size:clamp(2.5rem,1rem + 9vw,4.5rem);letter-spacing:.04em;color:var(--color-ember);text-shadow:0 0 28px oklch(60% .16 55 / .35)}.subtitle{color:var(--color-muted);font-style:italic;margin-bottom:var(--space)}.field{width:100%;background:var(--color-bg-soft);border:1px solid var(--color-surface);border-radius:var(--radius);color:var(--color-text);padding:.75rem 1rem;font:inherit;resize:none}.field:focus-visible{outline:none;border-color:var(--color-ember-dim);box-shadow:0 0 0 2px oklch(60% .16 55 / .18)}.classes{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.class-card{display:flex;flex-direction:column;gap:.3rem;text-align:left;padding:.85rem;background:var(--color-bg-soft);border:1px solid var(--color-surface);border-radius:var(--radius);color:var(--color-text);cursor:pointer;transition:border-color var(--duration) var(--ease),transform var(--duration) var(--ease)}.class-card:hover{transform:translateY(-2px)}.class-card.is-selected{border-color:var(--color-ember);box-shadow:0 0 0 1px var(--color-ember) inset}.class-name{font-family:var(--font-serif);font-size:1.15rem;color:var(--color-ember)}.class-desc{font-size:.82rem;color:var(--color-muted)}.btn{font:inherit;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;transition:background var(--duration) var(--ease),opacity var(--duration) var(--ease)}.btn:disabled{opacity:.5;cursor:default}.btn--primary{background:var(--color-ember);color:#190f0a;font-weight:600;padding:.85rem 1.5rem}.btn--ghost{background:transparent;border-color:var(--color-ember-dim);color:var(--color-ember);padding:.35rem .7rem;font-size:.82rem}.btn--send{background:var(--color-ember);color:#190f0a;font-size:1.3rem;width:3rem;flex:none}.screen--play{padding:0}.charbar{display:flex;align-items:center;gap:.75rem;padding:.6rem var(--space);background:#17100ce6;border-bottom:1px solid var(--color-surface);backdrop-filter:blur(8px);position:sticky;top:0;z-index:2}.charbar__name{font-family:var(--font-serif);font-size:.95rem}.charbar__ctx{color:var(--color-muted);font-size:.72rem;font-variant-numeric:tabular-nums}.charbar__icon svg{display:block}.charbar__ctx:empty{display:none}.charbar__icon{position:relative;background:transparent;border:1px solid var(--color-surface);color:var(--color-text);font-size:1.05rem;line-height:1;width:2.1rem;height:2.1rem;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--duration) var(--ease),transform var(--duration) var(--ease)}.charbar__icon:hover{border-color:var(--color-ember);transform:translateY(-1px)}.charbar__icon:active{transform:translateY(0) scale(.96)}.charbar__badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--color-ember);color:#190f0a;font-size:.62rem;font-weight:700;line-height:16px;text-align:center}.hpbar{flex:1;height:8px;background:var(--color-surface);border-radius:99px;overflow:hidden}.hpbar__fill{display:block;height:100%;background:linear-gradient(90deg,var(--color-blood),var(--color-ember));transition:width var(--duration) var(--ease)}.log{flex:1;overflow-y:auto;padding:var(--space);display:flex;flex-direction:column;gap:.85rem;scroll-behavior:smooth}.bubble{max-width:90%;padding:.7rem .95rem;border-radius:var(--radius);animation:rise var(--duration) var(--ease)}.bubble p+p{margin-top:.5rem}.bubble--dm{align-self:flex-start;background:var(--color-bg-soft);border:1px solid var(--color-surface);font-family:var(--font-serif);line-height:1.6}.bubble--player{align-self:flex-end;background:var(--color-ember-dim);color:#f4e9dd}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.overlay{position:fixed;inset:0;z-index:15;display:flex;background:#05010000;backdrop-filter:blur(0);transition:background var(--duration) var(--ease),backdrop-filter var(--duration) var(--ease)}.overlay.is-open{background:#0501008c;backdrop-filter:blur(3px)}.sheet{margin-top:auto;width:100%;max-width:720px;margin-left:auto;margin-right:auto;max-height:75%;display:flex;flex-direction:column;gap:.6rem;padding:.6rem var(--space) calc(var(--space) + env(safe-area-inset-bottom,0px));background:var(--color-bg-soft);border-top:1px solid var(--color-surface);border-radius:18px 18px 0 0;box-shadow:0 -12px 40px #00000073;transform:translateY(100%);transition:transform var(--duration) var(--ease)}.overlay.is-open .sheet{transform:translateY(0)}.sheet__grip{width:40px;height:4px;border-radius:99px;background:var(--color-surface);align-self:center}.sheet__head{display:flex;align-items:baseline;gap:.5rem}.sheet__title{font-family:var(--font-serif);font-size:1.2rem;color:var(--color-ember)}.sheet__gold{margin-left:auto;color:var(--color-ember);font-size:.85rem}.sheet__tabs{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}.sheet__tabs::-webkit-scrollbar{display:none}.sheet__tab{flex:0 0 auto;font:inherit;font-size:.78rem;color:var(--color-muted);background:transparent;border:1px solid var(--color-surface);border-radius:99px;padding:.3rem .85rem;cursor:pointer;white-space:nowrap;transition:color var(--duration) var(--ease),border-color var(--duration) var(--ease)}.sheet__tab.is-active{color:var(--color-ember);border-color:var(--color-ember)}.sheet__pager{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.sheet__pager::-webkit-scrollbar{display:none}.sheet__page{flex:0 0 100%;width:100%;scroll-snap-align:start;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;padding:.15rem}.sheet__empty{color:var(--color-muted);font-style:italic;text-align:center;padding:1.5rem 0}.dialog{margin:auto;width:calc(100% - 2 * var(--space));max-width:360px;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;background:var(--color-bg-soft);border:1px solid var(--color-surface);border-radius:16px;box-shadow:0 20px 50px #00000080;transform:scale(.94);opacity:0;transition:transform var(--duration) var(--ease),opacity var(--duration) var(--ease)}.overlay.is-open .dialog{transform:scale(1);opacity:1}.dialog__title{font-family:var(--font-serif);font-size:1.3rem;color:var(--color-ember)}.dialog__hint{color:var(--color-muted);font-size:.85rem}.dialog__actions{display:flex;flex-direction:column;gap:.5rem}.inv-row{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;font:inherit;color:var(--color-muted);padding:.6rem .75rem;background:var(--color-bg);border:1px solid var(--color-surface);border-radius:10px;cursor:pointer;transition:border-color var(--duration) var(--ease),background var(--duration) var(--ease),color var(--duration) var(--ease)}@media (hover: hover){.inv-row:not(.is-static):hover{border-color:var(--color-ember-dim)}}.inv-row.is-static{cursor:default}.inv-row.is-equipped{color:var(--color-text);border-color:var(--color-ember);background:#e87f2524;box-shadow:0 0 0 1px var(--color-ember) inset}.inv-name{flex:1;min-width:0;font-size:.95rem}.inv-chip{flex-shrink:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);border:1px solid var(--color-surface);border-radius:99px;padding:.12rem .5rem}.inv-chip.is-on{color:#190f0a;background:var(--color-ember);border-color:var(--color-ember);font-weight:700}.composer{display:flex;gap:.5rem;padding:var(--space);border-top:1px solid var(--color-surface);background:#17100ce6;position:sticky;bottom:0}.composer__input{max-height:6rem}.defeat{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space);background:#080201eb;backdrop-filter:blur(4px);z-index:10;animation:fade var(--duration) var(--ease)}.defeat__text{font-family:var(--font-serif);font-size:1.5rem;color:var(--color-blood);text-align:center;padding:0 var(--space)}.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%);background:var(--color-blood);color:#f8ece0;padding:.6rem 1rem;border-radius:var(--radius);font-size:.85rem;z-index:20;animation:fade var(--duration) var(--ease)}@keyframes fade{0%{opacity:0}to{opacity:1}}