/* OMNIA 0.8.1 · Manuscript
   One visual language for the whole game: historical type (IM Fell, with a blackletter for titles),
   ink rules and knotwork instead of modern frames, square ink-and-rubric buttons, parchment chrome.
   Loaded after every other stylesheet. */
@font-face{font-family:"IM Fell English";src:url("../site/fonts/im-fell-english-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell English";src:url("../site/fonts/im-fell-english-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IM Fell English SC";src:url("../site/fonts/im-fell-english-sc-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"UnifrakturMaguntia";src:url("../site/fonts/unifrakturmaguntia-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
 --vellum:#eadcb9;--vellum-2:#dfcca2;--vellum-3:#cdb37f;--ink:#2a2118;--ink-2:#55432f;--ink-3:#7d6747;
 --rubric:#8e2418;--rubric-2:#a8301f;--verd:#3e6a5b;--gold:#a8822f;
 --h:"IM Fell English SC","IM Fell English",Georgia,serif;--b:"IM Fell English",Georgia,serif;--bl:"UnifrakturMaguntia","IM Fell English",serif;
 --text:var(--ink);--paper:var(--vellum);--muted-ink:var(--ink-3);--rule:var(--ink-2);--line:var(--ink-2);--mute:var(--ink-3);
 --knot:url("../site/ui/knot-frame.svg");
 --double:inset 0 0 0 1px var(--vellum),inset 0 0 0 2px #2a211866;
 font-size:15px;
}
body{font-family:var(--b);color:var(--ink);background:#2a2118}
*{border-radius:0!important}
::selection{background:#8e241833}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:400!important;letter-spacing:0!important}
.eyebrow,.section-kicker{font:13px/1.2 var(--h)!important;letter-spacing:.06em!important;text-transform:none!important;color:var(--rubric)!important}
small,em{font-family:var(--b)}

/* ---------- buttons: square, inked, small capitals ---------- */
button,select,input{font-family:var(--b)}
button{font:15px/1.15 var(--h)!important;letter-spacing:.03em;color:var(--ink)!important;background:var(--vellum)!important;border:1px solid var(--ink)!important;box-shadow:var(--double)!important;text-shadow:none!important;transition:background .12s,color .12s}
button:hover{background:var(--vellum-2)!important}
button:active{transform:translateY(1px)}
button:disabled{opacity:.5}
button.active,button[aria-pressed=true]{background:var(--ink)!important;color:var(--vellum)!important;box-shadow:inset 0 0 0 1px var(--ink),inset 0 0 0 2px #eadcb955!important}
.primary,button.primary{background:var(--rubric)!important;color:#f6ead0!important;border-color:var(--ink)!important;box-shadow:inset 0 0 0 1px #6e1a10,inset 0 0 0 2px #f6ead055!important}
.primary:hover,button.primary:hover{background:var(--rubric-2)!important}
.quiet,button.quiet{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
input,select{background:#f4ead2!important;color:var(--ink)!important;border:1px solid var(--ink)!important;box-shadow:inset 0 1px 2px #2a211833!important;font:15px var(--b)!important}
input[type=range]{accent-color:var(--rubric);box-shadow:none!important;border:0!important;background:transparent!important}
a{color:var(--rubric)}

/* ---------- top bar: a parchment strip on a knotwork band ---------- */
.topbar{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;color:var(--ink)!important;border-style:solid!important;border-width:0 0 18px 0!important;border-image:var(--knot) 30 round!important;box-shadow:0 4px 14px #0005!important}
.topbar .brand,.brand{font:34px/1 var(--bl)!important;letter-spacing:.02em!important;color:var(--ink)!important;text-shadow:none!important}
.brand span{font:12px/1.2 var(--h)!important;letter-spacing:.12em!important;color:var(--rubric)!important;border-color:#2a211855!important}
.resources label{font:12px var(--h)!important;letter-spacing:.06em!important;color:var(--ink-3)!important;text-transform:none!important}
.resources b{font:23px/1 var(--b)!important;color:var(--ink)!important}
.resources i{color:var(--rubric)!important}
.resources small{font:12px var(--b)!important;color:var(--verd)!important}
.topbar .time{background:#f2e6c9!important;border:1px solid var(--ink)!important;box-shadow:var(--double)!important}
.time button{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--rubric)!important;font-size:16px!important}
#date{font:16px var(--h)!important;color:var(--ink)!important;letter-spacing:.02em!important}
#clock-status{font:11px var(--b)!important;font-style:italic!important;color:var(--ink-3)!important}
.topbar .quiet,.topbar #help,.topbar #menu{color:var(--ink)!important}

/* ---------- left rail ---------- */
.campaign-nav{background:var(--vellum-2) url("ui/vellum.webp") center/640px auto!important;color:var(--ink)!important;border-style:solid!important;border-width:0 18px 0 0!important;border-image:var(--knot) 30 round!important}
.nav-item{font:14px/1.15 var(--h)!important;letter-spacing:.02em!important;color:var(--ink-2)!important;background:transparent!important;border:0!important;box-shadow:none!important}
.nav-item:hover{background:#2a211812!important}
.nav-icon{background:transparent!important;border:0!important;box-shadow:none!important;clip-path:none!important;color:var(--ink)!important}
.nav-item.active{background:transparent!important;color:var(--rubric)!important;box-shadow:inset 3px 0 0 var(--rubric)!important}
.nav-item.active .nav-icon{color:var(--rubric)!important;background:transparent!important}
.nav-item em{background:var(--rubric)!important;color:#f6ead0!important;border:1px solid var(--ink)!important;box-shadow:none!important;font:11px/1 var(--b)!important;font-style:normal!important}
.nav-item #nav-army-count{background:var(--ink)!important}
.nav-home{font:13px var(--h)!important;color:var(--rubric)!important}

/* ---------- map furniture ---------- */
.realm-banner{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;border:16px solid transparent!important;border-image:var(--knot) 30 round!important;color:var(--ink)!important}
.realm-banner h1{font:26px/1.15 var(--bl)!important;color:var(--ink)!important}
.realm-banner p{font:14px/1.4 var(--b)!important;color:var(--ink-2)!important}
.realm-status{font:13px var(--b)!important;font-style:italic!important;color:var(--ink-3)!important}
.situation-prompt{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;border:1px solid var(--ink)!important;border-left:4px solid var(--rubric)!important;box-shadow:var(--double),0 6px 18px #0005!important;color:var(--ink)!important}
.situation-prompt b{font:16px/1.3 var(--h)!important;color:var(--ink)!important}
.situation-prompt small{font:13px/1.45 var(--b)!important;color:var(--ink-2)!important}
.situation-prompt>span,.situation-prompt em{color:var(--rubric)!important;font-style:normal!important;font-family:var(--h)!important}
.battle-status{background:var(--rubric)!important;color:#f6ead0!important;border:1px solid var(--ink)!important}
.map-tools{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;border:1px solid var(--ink)!important;box-shadow:var(--double),0 6px 16px #0005!important}
.map-tools button{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ink)!important;font-size:18px!important}
.map-tools button:hover{background:#2a211814!important}
.map-tools button.active{background:var(--ink)!important;color:var(--vellum)!important}
.map-scale{color:var(--ink)!important;text-shadow:0 0 3px var(--vellum),0 0 6px var(--vellum)!important}
.map-scale span{border-color:var(--ink)!important}
.map-scale b,.map-shortcuts,.legend,.credits,.controls-hint{font:13px var(--b)!important;font-style:italic!important}
.map-shortcuts,.controls-hint,.credits{background:#eadcb9e6!important;color:var(--ink-2)!important;border:1px solid var(--ink)!important;box-shadow:var(--double)!important}
.map-stage>canvas#minimap,.minimap{border:1px solid var(--ink)!important;box-shadow:var(--double),0 4px 12px #0005!important;outline:4px solid var(--vellum);outline-offset:0}

/* ---------- hover, menus, toasts, banners ---------- */
.hover,.context-menu,#toast,.toast,.order-banner,.command-mode{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;color:var(--ink)!important;border:1px solid var(--ink)!important;box-shadow:var(--double),0 8px 22px #0006!important;font-family:var(--b)!important}
.hover small,.hover em,.context-menu small{color:var(--ink-3)!important}
.context-menu strong,.command-mode strong{font:16px var(--h)!important;color:var(--rubric)!important}
.context-menu button{text-align:left}

/* ---------- desks: parchment folios in a knotwork frame ---------- */
#info-dialog.campaign-inspector{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;border-left:0!important;color:var(--ink)!important}
#info-dialog.campaign-inspector::after{border:20px solid transparent!important;border-image:var(--knot) 30 round!important}
.inspector-top{background:transparent!important;border-bottom:1px solid var(--ink)!important;box-shadow:0 2px 0 var(--vellum),0 3px 0 #2a211866!important;margin:0 20px!important;padding:0 14px!important}
.inspector-top>span{font:14px var(--h)!important;letter-spacing:.1em!important;color:var(--rubric)!important}
.inspector-top .dialog-close,.inspector-tools button,#inspector-expand{width:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;background:var(--vellum)!important;color:var(--ink)!important;border:1px solid var(--ink)!important;font-size:18px!important}
#info-content{color:var(--ink)!important}
#info-dialog h2,.chronicle-title h2,#info-dialog .chronicle-title h2{font:34px/1.1 var(--bl)!important;color:var(--ink)!important;letter-spacing:0!important}
#info-dialog h3{font:20px/1.2 var(--h)!important;color:var(--rubric)!important;letter-spacing:.02em!important}
#info-dialog h3::after{background:none!important;height:auto!important;content:"❦"!important;display:inline-block!important;margin-left:8px!important;color:var(--ink-3)!important;font-family:Georgia,serif;font-size:14px;width:auto!important}
#info-dialog p,#info-dialog li{font:16px/1.5 var(--b)!important;color:var(--ink)!important}
#info-dialog small{font:13px/1.35 var(--b)!important;color:var(--ink-3)!important}
#info-dialog b,#info-dialog strong{font-family:var(--h);font-weight:400!important;color:var(--ink)!important}
#info-dialog .panel-intro::first-letter,#info-dialog .chronicle-inscription::first-letter{font:2.6em/0.8 var(--bl);color:var(--rubric);float:left;margin:6px 6px 0 0}
.desk-summary,.route-metrics,.ledger-grid{border-top:1px solid var(--ink)!important;border-bottom:1px solid var(--ink)!important;background:transparent!important}
.desk-summary>div,.route-metrics>div,.ledger-grid>div{border-color:#2a211855!important;background:transparent!important}
.desk-summary b,.route-metrics b,.ledger-grid b{font:22px var(--b)!important;color:var(--ink)!important}
.desk-summary small,.route-metrics small,.ledger-grid small{font:12px var(--h)!important;letter-spacing:.04em;color:var(--ink-3)!important;text-transform:none!important}
.desk-card{background:#f3e8cc80!important;border:1px solid var(--ink)!important;box-shadow:var(--double)!important}
.desk-card h4{font:17px var(--h)!important;color:var(--ink)!important}
.desk-card.urgent{border-left:4px solid var(--rubric)!important}
.roster-row{background:transparent!important;border:0!important;border-bottom:1px dotted var(--ink-2)!important;box-shadow:none!important;text-align:left}
.roster-row:hover{background:#2a211810!important}
.roster-row>strong,.roster-row strong{font:20px var(--b)!important;color:var(--ink)!important}
.status-chip{background:transparent!important;border:1px solid var(--ink-2)!important;color:var(--ink-2)!important;font:12px var(--h)!important}
.status-chip.danger{color:var(--rubric)!important;border-color:var(--rubric)!important}
.status-chip.good{color:var(--verd)!important;border-color:var(--verd)!important}
.meter{background:transparent!important;border:1px solid var(--ink-2)!important;height:7px!important}
.meter i{background:var(--verd)!important}
.roster-filter button{font-size:14px!important}
.desk-disclosure summary{font:15px var(--h)!important;color:var(--rubric)!important}
.tree-person{background:transparent!important;border:0!important;box-shadow:none!important}
.tree-person strong{font:17px var(--b)!important}
.tree-role{font:11px var(--h)!important;letter-spacing:.06em;color:var(--rubric)!important}
.tree-level+.tree-level::before,.tree-children::after,.tree-children .tree-person::before{background:var(--ink)!important;border-color:var(--ink)!important}

/* ---------- settlement card and army bar ---------- */
#selection.town-card{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;border:18px solid transparent!important;border-image:var(--knot) 30 round!important;color:var(--ink)!important}
#selection h2{font:30px/1.1 var(--bl)!important;color:var(--ink)!important}
#selection .owner,#selection p{font-family:var(--b)!important;color:var(--ink-2)!important}
#selection .stat-grid{border-color:var(--ink)!important}
#selection .stat-grid b{font:21px var(--b)!important;color:var(--ink)!important}
#selection .stat-grid small{font:12px var(--h)!important;color:var(--ink-3)!important}
#selection .upgrade-grid button,#selection .upgrades button{background:var(--vellum)!important}
#selection .card-close{background:var(--vellum)!important;color:var(--ink)!important}
.army-bar{background:var(--vellum) url("ui/vellum.webp") center/640px auto!important;color:var(--ink)!important;border-style:solid!important;border-width:16px 0 0 0!important;border-image:var(--knot) 30 round!important;box-shadow:0 -6px 18px #0005!important}
.army-bar .force b{font:20px var(--b)!important;color:var(--ink)!important}
.army-bar .force small{color:var(--ink-3)!important}
.army-bar .eyebrow{color:var(--rubric)!important}

/* ---------- the opening book ---------- */
#welcome,.welcome{background:var(--vellum) url("ui/vellum.webp") center/650px auto!important;border:24px solid transparent!important;border-image:var(--knot) 30 round!important;color:var(--ink)!important;box-shadow:0 30px 120px #000c!important}
.welcome-art{border-right:1px solid var(--ink)!important;box-shadow:2px 0 0 var(--vellum),3px 0 0 #2a211866}
.welcome-art h2{font:64px/0.95 var(--bl)!important;color:#f3e3bb!important;letter-spacing:0!important}
.welcome-art h2 span{font:20px var(--h)!important;letter-spacing:.06em!important;color:#e9cf94!important}
.welcome-art p{font:17px/1.45 var(--b)!important;color:#f0e2c2!important}
.welcome-art small{font:13px var(--h)!important;letter-spacing:.1em!important;color:#e0c890!important}
.welcome-art .eyebrow{color:#e9cf94!important}
.welcome-body{background:transparent!important}
.welcome-body h3{font:30px/1.1 var(--bl)!important;color:var(--ink)!important}
.welcome-body h3.free-start{margin-top:22px}
.welcome-body .setup-note,.welcome-note{font:15px/1.45 var(--b)!important;color:var(--ink-2)!important}
.welcome-body label,.welcome label{font:14px var(--h)!important;letter-spacing:.04em!important;color:var(--rubric)!important}
.welcome label b{color:var(--ink)!important}
.start-choices button{text-align:left;font:17px var(--h)!important}
.start-choices button small,.start-choices small{font:13px var(--b)!important;font-style:italic!important;color:var(--ink-3)!important}
.start-choices button.active small{color:#eadcb9cc!important}
.campaign-presets{border:1px solid var(--ink)!important;box-shadow:var(--double)!important;background:#f3e8cc66!important}
.campaign-presets summary{font:17px var(--h)!important;color:var(--ink)!important}
.campaign-presets summary>span{font:13px var(--b)!important;font-style:italic!important;color:var(--rubric)!important}
.start-actions{background:linear-gradient(#eadcb900,var(--vellum) 30%)!important;border-top:1px solid var(--ink)!important}
#begin{font-size:19px!important;letter-spacing:.04em!important}
.welcome-note b{font-family:var(--h);font-weight:400}
.scenario-list button,.campaigns button{text-align:left}
#loading{background:#2a2118!important;color:var(--vellum)!important;font:22px var(--bl)!important;letter-spacing:.04em!important}

/* ---------- phones ---------- */
@media(max-width:760px){
 .topbar{border-width:0 0 14px 0!important}
 .topbar .brand,.brand{font-size:28px!important}
 .resources b{font-size:18px!important}
 .resources label{font-size:11px!important}
 #date{font-size:14px!important}
 .campaign-nav{border-width:14px 0 0 0!important;background:var(--vellum) url("ui/vellum.webp") center/640px auto!important}
 .nav-item{font-size:12px!important}
 .nav-item.active{box-shadow:inset 0 3px 0 var(--rubric)!important}
 #info-dialog h2{font-size:30px!important}
 .realm-banner{border-width:12px!important}
 .realm-banner h1{font-size:21px!important}
 .welcome-art h2{font-size:48px!important}
 #welcome,.welcome{border-width:16px!important}
}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}

/* layout fixes for the taller framed banner */
.realm-banner{padding:10px 16px 10px!important}
.situation-prompt,.battle-status{top:318px!important}
.welcome-art p{font-size:16px!important;line-height:1.4!important}
@media(max-width:760px){.situation-prompt,.battle-status{top:auto!important}}
@media(max-width:1100px) and (min-width:761px){.situation-prompt,.battle-status{top:300px!important}}
@media(max-width:760px){.campaign-nav{padding-top:0!important}.nav-item.active{border:0!important;background:#2a211810!important}.topbar{height:104px!important}.map-tools button{border:0!important}}
@media(max-width:760px){.topbar{border-width:0 0 4px 0!important;border-image:none!important;border-bottom:4px double var(--ink)!important}}
#selection .upgrades button,#selection .upgrade-grid button{padding:12px 14px!important;text-align:left}
#selection small,#selection .stat-grid small,#selection label{text-transform:none!important;font-family:var(--h)!important;letter-spacing:.03em!important}
#info-dialog small{text-transform:none}
#selection .stat-grid small,.levy-caption span{text-transform:lowercase!important;font-family:var(--h)!important;color:var(--ink-3)!important;font-size:15px!important}
.levy-caption b,#levy-label{color:var(--ink)!important;font:16px var(--b)!important}
