/* Shared type scale: compact phone layout, comfortable tablet and desktop text. */
.npc-speaker-link{padding:2px 0;background:transparent;color:inherit;font-weight:700;text-align:left;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
.npc-speaker-link:hover,.npc-speaker-link:focus-visible{text-decoration-color:var(--gold)}
.npc-message .avatar{flex-shrink:0}.npc-message-mark .ui-icon{width:18px;height:18px}
.story-workspace .message.npc-message{border-left:2px solid var(--green)}
.requested-roll-notice{padding:10px 12px;margin-bottom:10px;border:1px solid var(--gold);border-radius:10px;background:var(--surface);color:var(--ink);font-size:var(--text-11)}
.requested-roll-notice p{margin:4px 0 8px;max-height:4.5em;overflow:auto;overflow-wrap:anywhere}
dialog:has(.dice-theatre){width:min(720px,calc(100vw - 24px))}
dialog:has(.dice-theatre) .modal-body{padding:0}
.dice-theatre{--dice-light:#d9b66d;text-align:center;padding:26px clamp(16px,4vw,40px);background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--gold) 16%,var(--surface)),var(--surface) 70%);overflow:hidden}
.dice-theatre .dice-reason{margin:10px auto 0;max-width:48ch;overflow-wrap:anywhere}
.dice-stage{position:relative;width:min(320px,65vw,36dvh);aspect-ratio:1;margin:8px auto;isolation:isolate}
.d20-canvas{position:relative;z-index:2;display:block;width:100%;height:100%;filter:drop-shadow(0 14px 18px #0005)}
.dice-halo{position:absolute;inset:12%;border:1px solid var(--dice-light);border-radius:50%;opacity:.4;box-shadow:0 0 40px color-mix(in srgb,var(--dice-light) 25%,transparent),inset 0 0 30px color-mix(in srgb,var(--dice-light) 15%,transparent)}
.dice-halo::after{content:'';position:absolute;inset:-14px;border:1px dashed var(--dice-light);border-radius:50%}
.rolling .dice-halo{animation:oracle-orbit 3s linear infinite}
.dice-outcome{min-height:80px}.dice-outcome h3{font:clamp(22px,4vw,32px)/1.25 var(--serif);margin:0 0 8px}.dice-outcome p{margin:0;font-size:20px}
.dice-bonuses{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:12px 0 16px}.dice-bonuses>span{display:grid;gap:4px;min-width:70px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:var(--text-11)}.dice-bonuses b{font:24px var(--serif)}
.dice-theatre .field-note{max-width:46ch;margin:0 auto 16px}.dice-skip{min-width:180px;min-height:44px}
.dice-theatre.critical-success{--dice-light:#ffd677;box-shadow:none;border:0}.dice-theatre.critical-failure{--dice-light:#d26373;box-shadow:none;border:0}
.landed .dice-outcome,.landed .dice-bonuses{animation:oracle-reveal .6s ease-out both}.landed .dice-bonuses{animation-delay:.25s}
.dice-impact{position:absolute;inset:15%;border-radius:50%;border:2px solid var(--dice-light);opacity:0}
.landed .dice-impact{animation:oracle-impact .85s ease-out both}.critical-success.landed .dice-halo{animation:oracle-glow 1.4s ease-out}.critical-failure.landed .d20-canvas{animation:critical-shake .45s ease-out}
@keyframes oracle-orbit{to{transform:rotate(180deg)}}
@keyframes oracle-impact{from{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(1.8)}}
@keyframes oracle-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes oracle-glow{40%{opacity:1;box-shadow:0 0 65px #e9bd65aa}100%{opacity:.4}}
@media(max-width:480px){.dice-theatre{padding:18px 14px}.dice-outcome{min-height:68px}.dice-bonuses{gap:6px}.dice-bonuses>span{padding:8px 10px}.dice-theatre .eyebrow{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.dice-theatre *,.dice-theatre *::after{animation:none!important;transition:none!important}}
@media(max-height:700px){
  dialog:has(.dice-theatre) .modal-head{padding:10px 14px;gap:10px}
  dialog:has(.dice-theatre) .modal-heading h2{font-size:20px}
  dialog:has(.dice-theatre) .modal-head .eyebrow{display:none}
  .dice-theatre{padding:12px}
  .dice-stage{width:min(200px,29dvh);margin:0 auto}
  .dice-theatre .dice-reason{margin:6px auto;max-height:3em;overflow:auto;font-size:14px}
  .dice-outcome{min-height:58px}.dice-outcome h3{font-size:22px;margin-bottom:4px}.dice-outcome p{font-size:18px}
  .dice-bonuses{margin:6px 0 8px;gap:6px}.dice-bonuses>span{padding:5px 8px}.dice-bonuses b{font-size:20px}
  .dice-theatre .field-note{font-size:12px;margin-bottom:8px}
}
:root{--text-7:11px;--text-8:11px;--text-9:12px;--text-10:12px;--text-11:13px;--text-12:14px;--text-13:15px;--text-14:16px;--text-15:17px;--text-16:18px;--text-17:19px;--text-18:20px;--reading:17px;--control:40px}
html,body{font-size:var(--text-14);line-height:1.6}
#app .message-text,.stage-story-card p,.dossier-prose,.book-detail-text{font-size:var(--reading);line-height:1.75}
button,.btn{overflow-wrap:normal;word-break:normal;hyphens:none}
.btn{min-height:var(--control)}.btn.small{min-height:36px;white-space:normal;overflow-wrap:normal}
.btn .ui-icon{flex-shrink:0}
.game-tools [data-game=day-vote]{white-space:nowrap;flex-shrink:0;overflow-wrap:normal}
.story-workspace .game-tools>.row{flex-wrap:wrap}
@media(min-width:1181px){
  .story-workspace>.game-tools{width:min(560px,48vw)}
  .story-workspace>.game-tools>.row{flex-wrap:nowrap}
}
@media(min-width:761px) and (max-width:1180px){
  .story-workspace>.game-tools{position:relative;top:auto;left:auto;transform:none;width:auto;margin:0 18px 10px;flex:none}
}
input,select,textarea{font-size:16px;min-width:0}input:not([type=checkbox]):not([type=radio]),select{min-height:var(--control)}
.composer-box textarea{font-size:16px!important;line-height:1.6}
.roll-breakdown span,.badge,.field-note{line-height:1.5}
.story-workspace .scene-controls>.btn{display:inline-flex;flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:7px;border-radius:50%;font-size:0}
.story-workspace .scene-controls>.btn .ui-icon{width:20px;height:20px}
.story-workspace .scene-controls>.btn::before{content:none}
.story-workspace .scene-controls select{min-height:36px}
.row,.composer-actions,.generation{min-width:0}.modal-actions{gap:10px}
@media(min-width:768px){:root{--text-11:14px;--text-12:15px;--text-13:16px;--reading:18px;--control:42px}}
@media(min-width:1600px){:root{--text-9:13px;--text-10:13px;--text-11:14px;--text-12:15px;--text-13:16px;--text-14:17px;--text-15:18px;--text-16:19px;--text-17:20px;--text-18:21px;--reading:19px;--control:44px}}
@media(max-width:767px){
  .image-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .image-style-copy{padding:10px 11px 12px}
  .image-style-copy strong{font-size:var(--text-15)}
  .image-style-copy small{font-size:var(--text-9);line-height:1.45}
  .modal-body input,.modal-body select,.modal-body textarea,.onboarding-content input,.onboarding-content select,.onboarding-content textarea{font-size:16px!important}
  .modal-actions .btn,.modal-head .icon{min-height:44px}
  .story-workspace .game-tools>.row{flex-wrap:wrap;gap:6px}
  .story-workspace .game-tools>.row .btn{min-height:40px}
  .composer-actions,.generation{flex-wrap:wrap;gap:8px}
  .generation .btn{flex:1 1 130px}
  .scene-controls{flex-wrap:wrap}.scene-controls label{flex:1 1 150px;min-width:0}
  .story-workspace .scene-controls{flex-direction:row;flex-wrap:nowrap;align-items:center}
  .story-workspace .scene-controls label{flex:1 1 0;min-width:0}
  .story-companion-heading{gap:10px}.story-companion-heading h2{font-size:24px}
}