/* Lantern interface. Native adaptations of SmoothUI tab/button patterns and
   Originkit card highlights; see docs in README. All colors follow the theme. */
:root {
  --radius:18px;
  --shadow-soft:0 8px 28px color-mix(in srgb,var(--ink) 5%,transparent);
  --shadow-raised:0 16px 42px color-mix(in srgb,var(--ink) 10%,transparent);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
html {scrollbar-color:var(--line) transparent;scrollbar-width:thin}
body {letter-spacing:.05px}
button,input,textarea,select {transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s var(--ease-out)}
button {touch-action:manipulation}
.ui-icon {width:20px;height:20px;flex:none;vertical-align:middle}
.eyebrow {font-size:var(--text-10);letter-spacing:1.8px;line-height:1.5}
.btn {min-height:44px;border-radius:11px;padding:11px 17px;font-weight:600;box-shadow:0 1px 2px #00000004;line-height:1.35}
.btn.small {min-height:36px;border-radius:9px}
/* Keep an opaque color below the same overlay in both states. Removing the
   gradient on hover exposes a transparent color at the start of the transition. */
.btn.primary {background:linear-gradient(150deg,#ffffff17,transparent) var(--green);border-color:var(--green);box-shadow:0 3px 9px color-mix(in srgb,var(--green) 12%,transparent)}
.btn.primary:hover:not(:disabled) {background:linear-gradient(150deg,#ffffff17,transparent) var(--accent-hover);box-shadow:0 5px 16px color-mix(in srgb,var(--green) 18%,transparent)}
.btn.ghost {box-shadow:none}
.btn:active:not(:disabled),.icon:active:not(:disabled) {transform:scale(.97)}
.btn:disabled {box-shadow:none}
.icon {border-radius:10px;width:40px;height:40px}
.badge {border-radius:20px;padding:5px 9px;font-size:var(--text-9);letter-spacing:.7px;font-weight:600}
.brand-symbol {border-radius:13px;background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);width:45px;height:49px}
.brand-symbol svg {width:26px;height:34px}
.brand-name {letter-spacing:-.4px}
.brand small {font-size:var(--text-8);letter-spacing:1.5px}
/* Campaign library */
.lobby {max-width:1320px;padding:30px 56px 42px}
.lobby-header {margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.lobby-header .btn {font-size:var(--text-12)}
.lobby-hero {position:relative;gap:60px;grid-template-columns:1.2fr 1fr;padding:22px 0 48px;margin-bottom:32px;min-height:430px}
.lobby-kicker {display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;padding:7px 12px;font-size:var(--text-10);color:var(--muted);letter-spacing:.5px;background:var(--surface)}
.lobby-kicker .ui-icon {width:13px;height:13px;color:var(--gold)}
.lobby-hero h1 {font-size:clamp(44px,4.8vw,68px);line-height:1.08;letter-spacing:-2.5px;margin:22px 0;max-width:660px}
.lobby-hero h1 em {font-weight:400}
.lobby-hero p {font-size:var(--text-14);line-height:1.85;max-width:420px}
.lobby-art {height:360px;border-radius:170px 170px 22px 22px;box-shadow:var(--shadow-raised);border:7px solid var(--surface);outline:1px solid var(--line)}
.lobby-art:after {content:'';position:absolute;inset:0;box-shadow:inset 0 0 45px #183c2920;pointer-events:none;border-radius:inherit}
.art-label {bottom:22px;font-size:var(--text-15);letter-spacing:.3px;text-shadow:0 1px 6px #142b21}
.lobby-features {display:flex;flex-wrap:wrap;gap:16px;margin-top:26px;color:var(--muted);font-size:var(--text-11)}
.lobby-features span {display:flex;align-items:center;gap:6px}
.lobby-features .ui-icon {width:15px;height:15px;color:var(--gold)}
.lobby .page-heading h2 {font-size:30px;margin-top:5px}
.lobby .grid {grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.campaign-entry {background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;gap:0;transition:box-shadow .25s,border-color .25s,transform .25s}
.campaign-entry:hover {box-shadow:var(--shadow-raised);border-color:color-mix(in srgb,var(--green) 35%,var(--line));transform:translateY(-3px)}
.campaign-entry .campaign-card {border:0;border-radius:0;box-shadow:none;background:transparent;padding:24px 24px 18px;transform:none}
.campaign-entry>.btn {margin:0 18px 16px;min-height:30px;font-size:var(--text-10);background:transparent;border-color:transparent;color:var(--muted)}
.campaign-entry>.btn:hover {color:var(--danger);background:var(--hover)}
.campaign-card .campaign-icon {width:48px;height:48px;border:1px solid var(--line);background:var(--soft);border-radius:14px;display:grid;place-items:center;margin-bottom:24px}
.campaign-icon .ui-icon {width:24px;height:24px}
.campaign-card h2 {font-size:25px;overflow-wrap:anywhere}
.campaign-card .eyebrow {display:flex;align-items:center;justify-content:space-between;margin-top:25px;padding-top:16px;border-top:1px solid var(--line);color:var(--green);font-size:var(--text-9)}
.campaign-card .eyebrow .ui-icon {width:16px;height:16px}
.new-campaign {border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 40%,transparent);min-height:245px;gap:6px}
.new-campaign>span {width:48px;height:48px;border:1px dashed var(--line);border-radius:50%;display:grid;place-items:center;color:var(--green)}
[data-ui-glow] {position:relative;isolation:isolate}
[data-ui-glow]:before {content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(260px circle at var(--glow-x,50%) var(--glow-y,0%),color-mix(in srgb,var(--gold) 14%,transparent),transparent 75%);opacity:0;transition:opacity .25s}
[data-ui-glow]:hover:before {opacity:1}
.lobby-footer {margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
/* App navigation and reading room */
.shell {grid-template-columns:236px minmax(0,1fr)}
.sidebar {padding:26px 17px 18px;gap:24px;background:radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 45%),var(--nav-bg)}
.sidebar .brand {padding:0 7px}
.sidebar .brand-symbol {width:36px;height:43px}
.sidebar .brand-name {font-size:21px}
.sidebar .brand small {font-size:var(--text-7);letter-spacing:1.1px}
.room-switch {border-radius:10px;padding:12px 14px;min-height:43px;background:color-mix(in srgb,var(--nav-hover) 65%,transparent)}
.sidebar .eyebrow {font-size:var(--text-8);letter-spacing:1.5px}
.nav {gap:4px;margin-top:9px}
.nav button {min-height:43px;padding:10px 12px;border:1px solid transparent;border-radius:10px;font-size:var(--text-12);position:relative;transition:background .2s,color .2s}
.nav button.active {background:var(--nav-active);border-color:color-mix(in srgb,var(--nav-ink) 13%,transparent);box-shadow:0 3px 12px #0000000a}
.nav button.active:before {content:'';position:absolute;left:-8px;top:13px;bottom:13px;width:3px;border-radius:8px;background:var(--gold)}
.nav .nav-icon {display:grid;place-items:center;width:21px}
.nav .count {background:color-mix(in srgb,var(--nav-ink) 10%,transparent);opacity:1;min-width:20px;border-radius:7px;text-align:center;font-size:var(--text-10)}
.sidebar-bottom {padding-top:16px}
.sidebar-note {font-size:var(--text-13);line-height:1.65;opacity:.8}
.topbar {padding:19px 30px;background:color-mix(in srgb,var(--header) 85%,var(--surface));min-height:92px}
.topbar h1 {font-size:26px;letter-spacing:-.6px}
.breadcrumbs {font-size:var(--text-10);letter-spacing:.2px}
.connection {border:1px solid var(--line);border-radius:30px;padding:6px 10px;background:var(--surface);font-size:var(--text-10)}
.game-layout {grid-template-columns:minmax(0,1fr) 285px}
.game-tools {padding:12px 30px;background:var(--paper)}
.game-tools>.row strong {font:18px var(--serif)}
.game-tools .btn {min-height:33px;font-size:var(--text-11)}
.game-tools .field-note {font-size:var(--text-10)}
.scene-controls {margin-top:9px;gap:10px}
.scene-controls select {border-radius:8px;background:var(--surface);font-size:var(--text-12);min-height:33px}
.story-toolbar {padding:16px 30px 0;gap:10px}
.tabs {position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:11px;padding:4px;background:var(--panel);min-width:258px}
.tabs button {position:relative;z-index:1;padding:8px 14px;border:0;min-height:33px;border-radius:7px;font-size:var(--text-11);white-space:nowrap;background:transparent}
.tabs button.active {border:0;color:var(--green)}
.ui-tab-indicator {position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);border:1px solid var(--line);border-radius:7px;background:var(--surface);box-shadow:0 2px 5px #00000005;pointer-events:none}
.timeline {padding:20px 30px 28px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--gold) 4%,transparent),transparent 60%)}
.chapter-rule {font-size:var(--text-9);letter-spacing:2px;gap:20px;margin:8px 0 22px;color:var(--muted)}
.message {margin-bottom:22px}
.message.narrator {padding:25px 28px;border-radius:var(--radius);box-shadow:var(--shadow-soft);border-color:color-mix(in srgb,var(--gold) 15%,var(--line))}
.message.narrator:before {top:28px;bottom:28px;left:0;width:2px}
.message-text {font-size:var(--text-17);line-height:1.9}
.message-head {font-size:var(--text-11);gap:9px;flex-wrap:wrap}
.message-head time {font-size:var(--text-10)}
.mini-mark {width:31px;height:31px;border:1px solid var(--line);border-radius:10px}
.message.action,.message.chat {padding:15px 18px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:14px;background:color-mix(in srgb,var(--surface) 45%,transparent)}
.message.action .message-text,.message.chat .message-text {padding-left:40px}
.message.system {border-radius:0 8px 8px 0;background:var(--soft);font-size:var(--text-10)}
.compose {padding:13px 30px 18px;background:var(--paper)}
.turn-line {font-size:var(--text-10);margin-bottom:10px;min-width:0}
.turn-dots {gap:6px;flex:none}
.turn-dot {width:9px;height:9px;border-width:1.5px}
.turn-dot.done {box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 8%,transparent)}
.composer-box {border-radius:14px;padding:12px 15px;box-shadow:var(--shadow-soft)}
.composer-box:focus-within {box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 12%,transparent)}
.composer-box textarea {min-height:55px;resize:vertical}
.composer-actions {gap:8px;padding-top:6px}
.composer-hint {flex:1;min-width:100px}
.generation {margin-top:12px;gap:16px}
.generation p {font-size:var(--text-10);max-width:280px}
.generation .btn {font-size:var(--text-11);flex-shrink:0;max-width:100%}
.right-panel {background:var(--panel);padding:22px 19px}
.character-row {padding:10px 9px;gap:10px;border-radius:11px;margin-bottom:6px}
.character-row.selected {border-color:color-mix(in srgb,var(--green) 22%,var(--line));background:var(--soft)}
.character-row strong {font-size:var(--text-12)}
.avatar {width:39px;height:43px;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px #0000000c}
.right-panel .profile-hero {border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.profile-title h2 {font-size:25px}
.profile-text {font-size:var(--text-12);line-height:1.8}
.status {border:1px solid var(--line);border-radius:20px;padding:5px 9px;display:inline-flex;align-items:center;gap:6px;font-size:var(--text-10);margin:8px 0}
.status:before {margin:0;width:5px;height:5px;flex:none}
.item {padding:10px 11px;border-radius:10px;gap:9px}
.item .name {font-size:var(--text-11)}
.divider {margin:21px 0}
/* Character sheets, notes, inventory, model settings and world creation */
.page {padding:30px;scrollbar-width:thin}
.page-heading {margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.page-heading h2 {font-size:32px;letter-spacing:-.7px}
.page-heading p {font-size:var(--text-12);line-height:1.7;max-width:650px}
.page-heading>.btn {flex:none;font-size:var(--text-12)}
.grid {gap:18px}
.card,.model-card {border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-soft)}
.card h2 {letter-spacing:-.5px}
.card .profile-hero {border-radius:12px;border:1px solid var(--line);margin-bottom:18px}
.card .row {flex-wrap:wrap}
.card .row .btn {font-size:var(--text-11);min-height:36px}
.card .row h2,.card .row h3 {min-width:0;overflow-wrap:anywhere}
.item-traits {border-radius:0 10px 10px 0;padding:12px 14px;border-left-width:2px;font-size:var(--text-12)}
.empty {border-radius:var(--radius);padding:40px 24px;background:color-mix(in srgb,var(--surface) 40%,transparent)}
.empty-symbol {display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin:0 auto 18px;font-size:26px}
.empty p {line-height:1.8}
.note-body {line-height:1.9;font-size:var(--text-14)}
.info-box {border-radius:12px;padding:14px 17px;font-size:var(--text-12);line-height:1.75}
.memory-card {max-width:940px}
.proposal {border-left-width:2px}
.proposal pre {background:var(--paper);padding:14px;border-radius:10px}
.settings-grid {max-width:980px;gap:22px}
.model-card {padding:25px}
.model-card .fields {gap:18px}
input,textarea,select {border-radius:10px;padding:11px 13px;background:var(--surface)}
input:not([type=range]):not([type=checkbox]):not([type=radio]),select {min-height:42px}
input:hover,textarea:hover,select:hover {border-color:color-mix(in srgb,var(--green) 30%,var(--line))}
input[type=range] {border:0;box-shadow:none}
label {font-size:var(--text-12);gap:8px}
.field-note {font-size:var(--text-11);line-height:1.65}
.style-grid {gap:14px}
.style-choice {border-radius:14px;padding:20px;transition:background .2s,border-color .2s,box-shadow .2s}
.style-choice:hover {border-color:var(--green)}
.style-choice:has(input:checked) {box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 15%,transparent)}
.style-example {font-size:var(--text-16);line-height:1.8}
.director-scales {gap:24px}
.ability-summary>div {border-radius:12px;padding:12px;background:var(--paper)}
.ability-summary strong {font:28px var(--serif);color:var(--green)}
.ability-stepper .btn {min-width:36px;min-height:40px}
.ability-stepper input {border-radius:10px}
.roll-card {border-radius:14px;box-shadow:var(--shadow-soft);padding:18px}
.die-icon {border-radius:12px;transform:rotate(-5deg)}
.creation-section {border-radius:14px;padding:18px;background:var(--surface);margin:16px 0}
.creation-section>summary {font-size:var(--text-13);padding:3px 0}
.creation-section>summary::marker {color:var(--gold)}
.world-question {padding:15px 0 20px}
.world-question:last-child {border-bottom:0;padding-bottom:0}
.world-question>.btn {font-size:var(--text-11);background:var(--soft)}
.ai-suggestion {border-radius:0 12px 12px 0;padding:16px;border-left-width:2px}
/* Maps and long operations */
.operation-progress {border-radius:14px;background:var(--surface);box-shadow:var(--shadow-soft);padding:14px 17px}
.operation-progress progress {height:6px;margin:12px 0}
.player-notice {padding:12px 25px;gap:15px}
.player-notice .btn {flex:none}
/* Theme previews and dialogs */
.theme-grid {grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:18px}
.theme-choice {border-radius:16px;padding:16px;gap:10px;box-shadow:var(--shadow-soft)}
.theme-choice[aria-pressed=true] {box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent)}
.theme-preview {display:grid;grid-template-columns:23% 1fr;width:100%;height:105px;background:var(--swatch-1);border:1px solid #80808030;border-radius:10px;overflow:hidden;margin-bottom:5px;pointer-events:none}
.theme-preview-side {background:var(--swatch-3);opacity:.85}
.theme-preview-page {padding:12px;display:grid;align-content:start;gap:7px}
.theme-preview-page i {height:6px;border-radius:5px;background:var(--swatch-3);opacity:.35;display:block;width:65%}
.theme-preview-page i:first-child {height:36px;width:100%;background:var(--swatch-2);opacity:1;box-shadow:0 1px 3px #00000009}
.theme-preview-page i:last-child {width:40%}
.theme-swatches {margin:0;gap:5px}
.theme-swatches i {width:17px;height:17px}
.theme-title {font-size:var(--text-12)}
.theme-choice small {font-size:var(--text-11);line-height:1.6}
dialog {border-radius:22px;box-shadow:0 32px 100px #00000035;background:var(--paper);width:min(680px,calc(100vw - 32px));max-height:90dvh;scrollbar-width:thin}
dialog::backdrop {background:#10201dcc;backdrop-filter:blur(6px)}
.modal-head {padding:24px 28px 20px;background:var(--surface)}
.modal-head h2 {font-size:28px;letter-spacing:-.5px;line-height:1.25}
.modal-head .icon {flex:none;background:var(--paper);border:1px solid var(--line);width:34px;height:34px;font-size:22px}
.modal-body {padding:24px 28px}
.modal-actions {padding-top:20px;border-top:1px solid var(--line);margin-top:24px;flex-wrap:wrap}
.modal-body .profile-hero {border-radius:18px}
#toast {border-radius:14px;box-shadow:var(--shadow-raised);padding:14px 20px;font-size:var(--text-12)}
@media(min-width:1600px) {
  .shell {grid-template-columns:254px minmax(0,1fr)}
  .game-layout {grid-template-columns:minmax(0,1fr) 320px}
  .timeline,.compose {padding-left:max(36px,calc((100vw - 1420px)/2));padding-right:max(36px,calc((100vw - 1420px)/2))}
  .right-panel {padding:25px}
}
@media(max-width:1150px) {
  .shell {grid-template-columns:205px minmax(0,1fr)}
  .sidebar {padding:22px 13px;gap:21px}
  .sidebar .brand {gap:8px;padding:0}
  .sidebar .brand-name {font-size:20px}
  .sidebar .brand small {letter-spacing:.5px}
  .game-layout {grid-template-columns:minmax(0,1fr) 240px}
  .right-panel {padding:20px 14px}
  .topbar,.game-tools {padding-left:22px;padding-right:22px}
  .timeline,.compose {padding-left:20px;padding-right:20px}
  .story-toolbar {padding-left:20px;padding-right:20px}
  .story-toolbar>.eyebrow {display:none}
  .page {padding:25px 22px}
  .generation {gap:10px}
  .generation .btn {max-width:65%;white-space:normal}
  .lobby {padding:28px 35px}
  .lobby-hero {gap:35px}
}
@media(max-width:900px) {
  .game-layout {grid-template-columns:minmax(0,1fr)}
  .right-panel {display:none}
  .lobby-hero h1 {font-size:49px}
  .lobby-art {height:290px}
  .page-heading h2 {font-size:29px}
}
@media(max-width:640px) {
  .lobby {padding:20px 20px 30px}
  .lobby-header {margin-bottom:20px;padding-bottom:18px;gap:16px}
  .lobby-header>.row {width:100%;justify-content:space-between}
  .lobby-header .btn {min-height:36px;font-size:var(--text-11);padding:8px 11px}
  .lobby .brand-name {font-size:25px}
  .lobby-hero {grid-template-columns:1fr;gap:30px;padding:6px 0 30px;min-height:0;margin-bottom:25px}
  .lobby-hero h1 {font-size:47px;letter-spacing:-1.9px;margin:19px 0}
  .lobby-hero p {font-size:var(--text-13);line-height:1.8;margin-bottom:20px}
  .lobby-hero .row {gap:8px}
  .lobby-hero .row .btn {font-size:var(--text-12);padding:12px 13px}
  .lobby-art {height:190px;border-radius:90px 90px 16px 16px;border-width:5px}
  .lobby-features {gap:13px;margin-top:20px;font-size:var(--text-10)}
  .lobby-kicker {font-size:var(--text-9)}
  .lobby .page-heading {padding-bottom:13px}
  .lobby .page-heading h2 {font-size:27px}
  .lobby .grid {grid-template-columns:1fr;gap:16px}
  .campaign-entry .campaign-card {padding:23px}
  .campaign-card .campaign-icon {margin-bottom:18px}
  .new-campaign {min-height:155px}
  .shell {display:flex}
  .sidebar {display:none}
  .topbar {padding:12px 15px;min-height:73px;gap:10px}
  .topbar h1 {font-size:21px;letter-spacing:-.5px;overflow-wrap:anywhere}
  .breadcrumbs {font-size:var(--text-9);gap:6px}
  .top-actions .btn {min-height:36px;padding:8px 10px}
  .top-actions .icon {width:32px}
  .game-tools {padding:9px 14px}
  .game-tools>.row strong {font-size:var(--text-16)}
  .game-tools .btn {min-height:32px;font-size:var(--text-10);padding:6px 9px}
  .game-tools .field-note {font-size:var(--text-9);line-height:1.5}
  .scene-controls {gap:7px;margin-top:7px;flex-wrap:wrap}
  .scene-controls label {min-width:120px}
  .scene-controls select {font-size:var(--text-12);padding:6px 9px;min-height:32px}
  .story-toolbar {padding:10px 14px 0}
  .tabs {min-width:0;width:100%;padding:3px;border-radius:10px}
  .tabs button {padding:7px 8px;font-size:var(--text-11);min-height:30px}
  .ui-tab-indicator {top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/2)}
  .timeline {padding:14px 12px 20px;min-height:80px}
  .chapter-rule {font-size:var(--text-8);letter-spacing:1.4px;gap:12px;margin-bottom:17px}
  .message.narrator {padding:18px;border-radius:15px}
  .message-head {font-size:var(--text-10);gap:7px;margin-bottom:12px}
  .message-head .badge {font-size:var(--text-8);padding:4px 6px}
  .message-head time {font-size:var(--text-9)}
  .mini-mark {width:27px;height:27px;border-radius:8px}
  .message-text {font-size:var(--text-16);line-height:1.85}
  .message.action,.message.chat {padding:13px;border-radius:13px}
  .message.action .message-text,.message.chat .message-text {padding-left:0}
  .compose {padding:10px 12px 12px}
  .turn-line {font-size:var(--text-9);gap:10px;margin-bottom:7px}
  .composer-box {padding:9px 11px;border-radius:13px}
  .composer-box textarea {font-size:var(--text-16);min-height:44px;max-height:140px}
  .composer-actions {gap:6px;padding-top:4px}
  .composer-hint {font-size:var(--text-9);min-width:80px}
  .composer-actions .btn {font-size:var(--text-11);min-height:34px;padding:8px 9px}
  .generation {margin-top:9px;gap:8px}
  .generation p {font-size:var(--text-9);line-height:1.5;flex:1;min-width:0}
  .generation .btn {font-size:var(--text-10);min-height:38px;padding:9px 11px;max-width:61%;white-space:normal}
  .mobile-nav {padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--surface);gap:3px;z-index:4}
  .mobile-nav button {border-radius:10px;flex:1;min-width:0;font-size:var(--text-9);min-height:47px;padding:6px 3px;gap:3px}
  .mobile-nav button.active {background:var(--soft);color:var(--green)}
  .mobile-nav button span {display:grid;place-items:center;line-height:1}
  .mobile-nav .ui-icon {width:19px;height:19px}
  .mobile-nav .count {min-width:14px;right:7px;top:3px;font-size:var(--text-8)}
  .page {padding:22px 15px}
  .page-heading {gap:12px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:20px}
  .page-heading h2 {font-size:28px}
  .page-heading p {font-size:var(--text-11)}
  .page-heading>.btn {font-size:var(--text-11);min-height:39px;white-space:normal}
  .grid {grid-template-columns:1fr;gap:16px}
  .card,.model-card {padding:20px;border-radius:16px}
  .card h2 {font-size:26px}
  .model-card .fields {gap:15px}
  .fields {grid-template-columns:1fr}
  .fields .full {grid-column:auto}
  input,textarea,select {font-size:var(--text-16)}
  .ability-grid input {font-size:var(--text-16)}
  .theme-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .theme-choice {padding:12px;min-width:0;border-radius:14px}
  .theme-preview {height:80px}
  .theme-preview-page {padding:8px}
  .theme-title {font-size:var(--text-11);align-items:flex-start}
  .theme-choice small {font-size:var(--text-10)}
  .style-choice {padding:17px;border-radius:13px}
  .creation-section {padding:14px}
  .world-question {padding-bottom:16px}
  .player-notice {padding:10px 14px;font-size:var(--text-11)}
  .operation-progress {margin:7px 12px;padding:11px 13px}
  .operation-heading {font-size:var(--text-11)}
  dialog {width:calc(100vw - 20px);border-radius:20px;max-height:92dvh}
  .modal-head {padding:19px 20px 16px}
  .modal-head h2 {font-size:25px}
  .modal-body {padding:20px}
  .modal-actions {gap:8px}
  .modal-actions .btn {flex:1}
  #toast {bottom:82px;font-size:var(--text-12)}
}
@media(max-height:740px) and (max-width:640px) {
  .topbar {min-height:62px;padding-top:8px;padding-bottom:8px}
  .game-tools {padding-top:6px;padding-bottom:6px}
  .story-toolbar {padding-top:6px}
  .compose {padding-top:8px;padding-bottom:8px}
  .generation {margin-top:7px}
  .mobile-nav {padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}
}
/* Portrait cards: the description sheet stays within its own gallery cell. */
.hero-gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:32px 28px;padding:14px 10px 20px}
.hero-deck {min-width:0;position:relative}
.hero-stack {position:relative;height:440px;isolation:isolate;margin-bottom:16px}
.hero-stack:before {content:'';position:absolute;inset:8px 1px 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:23px;transform:rotate(3deg);box-shadow:var(--shadow-soft)}
.hero-cover {position:absolute;inset:0;width:100%;height:100%;padding:0;overflow:hidden;border-radius:22px;border:1px solid #ffffff24;background:#23392f;color:#fffdf6;text-align:left;box-shadow:0 14px 30px #00000020;transition:transform .35s var(--ease-out),box-shadow .35s;z-index:1}
.hero-cover .profile-hero {position:absolute;inset:0;height:100%;width:100%;margin:0;border:0;border-radius:0;aspect-ratio:auto}
.hero-cover .profile-hero img {object-fit:cover;object-position:center 30%;transition:transform .6s var(--ease-out)}
.hero-cover .profile-art {font-size:100px;background:radial-gradient(ellipse at 50% 25%,#adc0a7aa,transparent 60%),linear-gradient(160deg,#486659,#1b3028);color:#c1cfaa;align-items:flex-start;padding-top:95px}
.hero-cover .profile-art:before,.hero-cover .profile-art:after {margin:35px 8px;font-size:25px}
.hero-cover:after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,#08161244,transparent 28%,#08161222 42%,#081612e6 79%,#081612fa);pointer-events:none}
.hero-cover-top {position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:2}
.hero-tag {display:inline-block;font:10px var(--sans);letter-spacing:.6px;padding:7px 10px;border:1px solid #ffffff4a;border-radius:30px;color:#fffdf6;background:#11251e99;backdrop-filter:blur(8px)}
.hero-open {display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#11251e66;border:1px solid #ffffff40}
.hero-open .ui-icon {width:16px;height:16px;transform:rotate(-35deg)}
.hero-cover-info {position:absolute;left:23px;right:23px;bottom:20px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-shadow:0 2px 10px #00000055}
.hero-role {font-size:var(--text-10);letter-spacing:1.5px;text-transform:uppercase;line-height:1.6;color:#e2d2ad;overflow-wrap:anywhere}
.hero-name {font:36px/1.1 var(--serif);letter-spacing:-.7px;overflow-wrap:anywhere;max-width:100%}
.hero-condition {font-size:var(--text-11);color:#d4ded4;line-height:1.5;overflow-wrap:anywhere}
.hero-abilities {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:5px;padding:15px 0 0;margin-top:7px;border-top:1px solid #ffffff3a;text-shadow:none}
.hero-abilities>span {display:flex;flex-direction:column;gap:4px}
.hero-abilities small {font-size:var(--text-9);color:#d4ded4;overflow-wrap:anywhere}
.hero-abilities strong {font:24px var(--serif);color:#fffdf6}
.hero-cover-hint {font-size:var(--text-9);letter-spacing:1px;text-transform:uppercase;color:#ccd8cc;margin-top:8px}
.hero-preview {position:absolute;top:32px;right:0;bottom:0;width:87%;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:25px 23px;text-align:left;border:1px solid var(--line);border-radius:19px;background:var(--surface);color:var(--ink);box-shadow:0 15px 35px #00000025;opacity:0;visibility:hidden;pointer-events:none;transform:translate(4px,18px) rotate(3deg);transition:transform .35s var(--ease-out),opacity .25s,visibility .35s;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.hero-preview-name {font:26px/1.2 var(--serif);overflow-wrap:anywhere;max-width:100%}
.hero-preview-copy,.hero-preview-skills {font-size:var(--text-12);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;width:100%}
.hero-preview-skills {padding-top:12px;border-top:1px solid var(--line);color:var(--muted)}
.hero-preview-skills b {display:block;font-size:var(--text-10);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.hero-preview-link {margin-top:auto;padding-top:16px;font-size:var(--text-10);color:var(--green);display:flex;align-items:center;gap:10px}
.hero-controls {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:0 4px}
.hero-controls .btn {font-size:var(--text-11);padding:8px 10px}
.hero-controls .danger {margin-left:auto}
@media(hover:hover) and (pointer:fine) {
  .hero-stack:hover .hero-cover {transform:translateX(-7px) rotate(-2deg);box-shadow:0 20px 35px #00000030}
  .hero-stack:hover .hero-cover img {transform:scale(1.04)}
  .hero-stack:hover .hero-preview {opacity:1;visibility:visible;pointer-events:auto;transform:translate(6px,-8px) rotate(2deg)}
}
.hero-stack:has(.hero-cover:focus-visible) .hero-preview {opacity:1;visibility:visible;pointer-events:auto;transform:translate(6px,-8px) rotate(2deg)}
.hero-deck-compact .hero-stack {height:380px;margin:8px 0 17px}
.hero-deck-compact .hero-cover-info {left:17px;right:17px;bottom:17px}
.hero-deck-compact .hero-name {font-size:30px}
.hero-deck-compact .hero-abilities {gap:3px}
.hero-deck-compact .hero-abilities small {font-size:var(--text-8)}
.hero-deck-compact .hero-preview {padding:21px 17px;width:92%}
/* Dossier and forms share the same paper, chapter headings and writing areas. */
dialog .modal-head {position:sticky;top:0;z-index:5;gap:14px;align-items:center;border-bottom:1px solid var(--line);background:var(--surface)}
.modal-emblem {width:43px;height:49px;display:grid;place-items:center;flex:none;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:15px 15px 7px 7px;color:var(--gold);background:var(--paper)}
.modal-emblem .ui-icon {width:23px;height:23px}
.modal-heading {flex:1;min-width:0}
.modal-heading .eyebrow {display:block;font-size:var(--text-8);letter-spacing:1.8px;margin-bottom:5px;color:var(--muted)}
.modal-heading h2 {overflow-wrap:anywhere}
dialog[data-kind=form] .modal-body {background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--gold) 5%,transparent),transparent 55%),var(--paper)}
.modal-body form>.stack {gap:22px}
.modal-body form>.stack>label:not(.check),.form-section,.modal-body .ability-fields {border:1px solid var(--line);padding:18px;border-radius:14px;background:var(--surface);min-width:0;margin:0}
.form-section legend,.modal-body .ability-fields legend {font:18px var(--serif);color:var(--green);padding:0 8px}
.form-section>.field-note {margin:0 0 15px}
.form-section label,.modal-body form>.stack>label {color:var(--secondary);font-weight:600}
.form-section label .field-note,.modal-body label .field-note {font-weight:400}
.modal-body label input,.modal-body label textarea,.modal-body label select {font-weight:400;color:var(--ink);border-color:var(--line);box-shadow:inset 0 1px 3px #00000004}
.modal-body label textarea {line-height:1.8;min-height:108px}
.modal-body label input:focus,.modal-body label textarea:focus,.modal-body label select:focus {outline:2px solid color-mix(in srgb,var(--focus) 55%,transparent);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--focus) 6%,transparent)}
.modal-body .check {padding:11px 13px;border-radius:10px;background:var(--soft);font-weight:400;line-height:1.7}
.modal-body .modal-actions {position:sticky;bottom:-24px;z-index:4;background:var(--paper);padding:18px 0 24px;margin-bottom:-24px;box-shadow:0 -10px 16px var(--paper);gap:10px}
.modal-body .modal-actions .primary {margin-left:auto}
#portrait-preview .profile-hero {width:154px;aspect-ratio:3/4;border-radius:17px;margin:0 auto 20px;box-shadow:var(--shadow-raised);border:4px solid var(--paper)}
#portrait-preview+.row {justify-content:center}
.upload-label {border-style:dashed!important;background:var(--paper)!important}
dialog[data-kind=character-sheet] {width:min(960px,calc(100vw - 32px))}
.character-dossier {display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:30px;align-items:start}
.dossier-portrait {position:relative;overflow:hidden;border-radius:18px;min-height:360px;background:#203d36;box-shadow:var(--shadow-soft)}
.dossier-portrait>.profile-hero {width:100%;height:390px;aspect-ratio:auto;border-radius:0;margin:0;border:0}
.dossier-portrait .profile-art {font-size:90px}
.dossier-caption {position:absolute;inset:auto 0 0;padding:65px 20px 22px;background:linear-gradient(transparent,#081612ee);color:#fffdf6}
.dossier-caption h3 {font:25px/1.25 var(--serif);margin:12px 0 6px;overflow-wrap:anywhere}
.dossier-caption p {font-size:var(--text-12);overflow-wrap:anywhere}
.dossier-body {display:grid;gap:26px;min-width:0}
.dossier-body>section {min-width:0}
.dossier-body .eyebrow {margin-bottom:13px;color:var(--green);font-size:var(--text-9)}
.dossier-prose {white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.9 var(--serif)}
.dossier-body .ability-summary {gap:7px}
.dossier-body .ability-summary>div {padding:12px 10px;border:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:5px}
.dossier-body .ability-summary small {font-size:var(--text-10);overflow-wrap:anywhere}
.dossier-items {display:grid;gap:12px}
.dossier-items article {border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--surface);overflow-wrap:anywhere}
.dossier-items article>p {font-size:var(--text-12);line-height:1.8;white-space:pre-wrap;margin-top:7px}
.dossier-items article strong {font-size:var(--text-13)}
.dossier-items .item-traits {font-size:var(--text-11)}
@media(max-width:640px) {
  .hero-gallery {gap:27px;padding:10px 5px 20px}
  .hero-stack {height:460px}
  .hero-cover-info {left:24px;right:24px}
  .hero-name {font-size:38px}
  .hero-controls .btn {min-height:40px}
  dialog .modal-head {gap:11px;padding:17px 18px}
  .modal-emblem {width:35px;height:42px;border-radius:12px 12px 6px 6px}
  .modal-emblem .ui-icon {width:20px;height:20px}
  .modal-heading h2 {font-size:24px}
  .modal-heading .eyebrow {font-size:var(--text-7);letter-spacing:1.1px}
  .modal-body form>.stack>label:not(.check),.form-section,.modal-body .ability-fields {padding:15px}
  .modal-body .modal-actions {bottom:-20px;padding-bottom:20px;margin-bottom:-20px}
  .modal-body .modal-actions .btn {font-size:var(--text-11)}
  dialog[data-kind=character-sheet] {width:calc(100vw - 20px)}
  .character-dossier {grid-template-columns:1fr;gap:24px}
  .dossier-portrait {min-height:300px}
  .dossier-portrait>.profile-hero {height:340px}
  .dossier-body .ability-summary {grid-template-columns:repeat(2,minmax(0,1fr))}
  .dossier-body .ability-summary small {font-size:var(--text-11)}
}
@media(prefers-reduced-motion:reduce) {
  .hero-stack:hover .hero-cover,.hero-stack:hover .hero-cover img {transform:none}
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-ui-glow]:before {display:none}
  .btn:active:not(:disabled),.campaign-entry:hover {transform:none}
}
.prose-guard-card{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--gold) 42%,var(--line));background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--gold) 8%,var(--soft)))}.prose-guard-card:before{content:'“';position:absolute;right:20px;top:0;font:100px/1 var(--serif);color:color-mix(in srgb,var(--gold) 12%,transparent);pointer-events:none}.prose-guard-card h3{font:26px/1.15 var(--serif);margin:6px 0 0}.prose-guard-card>p{max-width:760px;color:var(--muted);line-height:1.65}.prose-guard-card label{position:relative;max-width:620px}