168 lines
44 KiB
CSS
168 lines
44 KiB
CSS
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253c32;background:#f4f0e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,.button{border:1px solid #d4d8cd;border-radius:10px;background:#fffdf7;color:#253c32;padding:12px 16px;cursor:pointer;min-height:44px;font-weight:600;text-decoration:none;display:inline-block}button:hover,.button:hover{background:#e9eee4}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b78a3e;outline-offset:3px}.primary{background:#284e3d;color:#fff;border-color:#284e3d}.primary:hover{background:#38644e}.quiet{border:0;background:transparent;padding:8px;color:#557161;font-size:13px}.topbar{height:82px;background:#162720;color:#e8eddd;display:flex;align-items:center;gap:20px;padding:0 max(24px,calc((100vw - 1120px)/2));border-bottom:1px solid #304536}.topbar .quiet{color:#e8eddd}.brand{font-family:Georgia,serif;color:#ebd9a4;display:flex;align-items:center;gap:13px;text-decoration:none;font-size:28px}.brand>span{font-family:inherit;font-size:16px;letter-spacing:3px}.brand-sub{display:block;font-family:system-ui;font-size:8px;letter-spacing:2px;margin-top:5px;color:#a6b5a8}.status{margin-left:auto;font-size:11px;color:#afc6b3;white-space:nowrap}.status:before{content:'●';margin-right:8px;font-size:8px}main{max-width:1120px;margin:auto;padding:22px 28px 100px}.character-switch{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;color:#6b796d;font-size:13px}.character-switch select{width:auto;max-width:60%;border:none;background:transparent;padding-left:0;font-size:13px}.hero{display:flex;gap:22px;align-items:center;margin-bottom:34px}.monogram{width:78px;height:90px;flex-shrink:0;border-radius:45% 45% 20% 20%;border:1px solid #b7a779;background:#e6deca;display:grid;place-items:center;font-family:Georgia,serif;font-size:42px;position:relative}.monogram span{position:absolute;bottom:-8px;background:#f4f0e8;padding:0 5px;font-size:20px;color:#9a7939}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#7d7f5a;margin:0 0 10px;text-transform:uppercase}h1{font-family:Georgia,'Times New Roman',serif;font-size:43px;font-weight:400;letter-spacing:-1px;line-height:1.1;margin:0 0 8px}.hero p:last-child{margin:0;color:#778477;font-size:13px}.edit{margin-left:auto;background:transparent;border:0;font-size:12px}.combat-grid{display:grid;grid-template-columns:2.5fr repeat(3,1fr);gap:14px;margin-bottom:18px}.hp-card{text-align:left;background:#284e3d;color:#ecf0df;border:0;padding:22px 24px}.hp-card:hover{background:#315a46}.card-label{font-size:10px;letter-spacing:1.5px;display:flex;justify-content:space-between;color:#ccd8bd}.hp-value{font-size:54px;font-family:Georgia,serif;margin:8px 0}.hp-value small{font-size:23px;margin-left:10px;color:#aac3a7}.hp-track{height:5px;background:#19392a;border-radius:5px;overflow:hidden}.hp-track i{display:block;height:100%;background:#c3c98d}.hp-footer{display:flex;justify-content:space-between;font-size:10px;color:#c4d0b9;margin-top:12px}.stat-card{border:1px solid #dbdecf;background:#faf9f3;border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px}.stat-card>span{font-size:9px;letter-spacing:1px;color:#6a7869}.stat-card strong{font-family:Georgia,serif;font-size:42px;font-weight:400;margin:10px 0}.stat-card small{font-size:11px;color:#7a8577}.ability-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:28px}.ability-row button{display:flex;flex-direction:column;align-items:center;padding:13px;background:transparent;border-color:#d8d6c7}.ability-row span{font-size:9px;letter-spacing:1.5px;color:#73816d}.ability-row strong{font-size:27px;font-family:Georgia,serif;font-weight:400;margin:5px}.ability-row small{border-top:1px solid #d8d6c7;padding:3px 12px;font-size:11px;color:#7e8978}.two-column{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:#fffdf7;border:1px solid #deded0;border-radius:14px;padding:24px;margin-bottom:20px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}h2{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:0}h3{font-size:14px;margin-top:24px}.hint{font-size:13px;line-height:1.7;color:#7a8375}.hint button{display:block;padding-left:0}.action-row{display:flex;align-items:center;text-align:left;border:0;border-top:1px solid #eeeede;border-radius:0;width:100%;gap:14px;padding:16px 0;background:transparent}.action-row strong{margin-left:auto;color:#395a44;font-family:Georgia,serif;font-size:25px}.action-row b,.resource b,.spell-row b{font-size:14px;font-weight:600}.action-row small,.resource small,.spell-row small{display:block;font-size:11px;font-weight:400;color:#7c8777;margin-top:5px}.action-symbol{border-radius:8px;padding:9px 13px;background:#edf0e5;color:#6f8057}.resource{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eeeede;padding:16px 0;gap:10px}.counter{display:flex;align-items:center;gap:12px}.counter button{padding:4px 8px;min-width:36px;border:0;background:#eff1e7}.counter strong{font-size:17px;min-width:18px;text-align:center}.chip{font-size:10px;border:1px solid #dfe4d4;color:#657459;padding:7px 10px;border-radius:20px;white-space:nowrap}.save-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding-bottom:20px;border-bottom:1px solid #edeede;margin-bottom:16px}.save-row button{display:flex;justify-content:space-between;border:0;font-size:11px;background:#f2f3e9;padding:12px 8px}.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 30px}.skill-grid button{display:flex;justify-content:space-between;border:0;border-radius:5px;padding:12px 5px;font-size:12px;background:transparent;font-weight:400}.skill-grid b{font-weight:600}.rest-bar{display:flex;align-items:center;gap:12px;margin:20px 0}.rest-bar>span{margin-right:auto;font-size:13px;color:#7a8375}.rest-bar button{font-size:12px}footer{display:flex;justify-content:space-between;font-size:9px;color:#8a907f;letter-spacing:1px;border-top:1px solid #dddecd;padding:25px 0;margin-top:42px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);display:flex;width:min(100%,640px);background:#fffdf7eb;backdrop-filter:blur(15px);border:1px solid #dcded0;border-bottom:0;border-radius:20px 20px 0 0;padding:8px 10px max(10px,env(safe-area-inset-bottom));z-index:10;box-shadow:0 -5px 30px #16272009}.bottom-nav button{flex:1;border:0;background:transparent;display:flex;flex-direction:column;gap:5px;align-items:center;color:#89917f;font-size:10px;padding:8px 4px;min-width:0}.bottom-nav button>span{font-size:22px;line-height:25px}.bottom-nav button.active{background:#e9eede;color:#284e3d;border-radius:12px}.overlay{position:fixed;inset:0;background:#13291ee0;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:30;padding:24px}.drawer{background:#fffdf7;border-radius:18px;padding:26px;max-width:600px;width:100%;max-height:90dvh;overflow-y:auto;box-shadow:0 20px 100px #0005}.close{border:0;background:transparent;font-size:28px;line-height:20px;padding:8px}.drawer h2{font-size:27px}label{display:block;font-size:12px;color:#64745f;font-weight:500;margin-bottom:16px}input,select,textarea{display:block;width:100%;margin-top:7px;border:1px solid #d6dccb;background:#f9faf2;padding:12px;border-radius:8px;color:#253c32;min-height:44px}textarea{resize:vertical;line-height:1.7}input[type=checkbox]{display:inline-block;width:18px;min-height:18px;height:18px;margin:0;accent-color:#284e3d}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid.three{grid-template-columns:repeat(3,1fr)}.wide{width:100%;margin-top:18px}.check-row{display:flex;flex-wrap:wrap;gap:16px}.check-row label{display:flex;align-items:center;gap:6px}.big-number{font-family:Georgia,serif;font-size:64px;text-align:center;margin:20px}.big-number small{font-size:30px;color:#8b9984}.quick-hp{display:flex;gap:8px;margin-bottom:24px}.quick-hp button{flex:1;padding:10px 0}.danger-text{color:#aa4a3d}.preview-row{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid #e6e8da;padding:15px 0}.roll-buttons{display:flex;gap:8px}.roll-buttons button{flex:1;padding:12px 6px;font-size:12px}.roll-result{font-family:Georgia,serif;font-size:30px;text-align:center;padding:16px;border-radius:10px;background:#eef1e3;min-height:65px}.spell-row,.list-entry{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid #eeeede;padding:12px 0}.list-entry .action-row{border:0;flex:1}.spell-row label{display:flex;gap:15px;margin:0;align-items:center}.spell-row p{font-size:12px;line-height:1.7;color:#6f7c68;white-space:pre-wrap}.settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.settings-actions label{margin:0;font-size:14px}.notice{background:#e7eacb;padding:12px 18px;border-radius:10px;font-size:13px;display:flex;justify-content:space-between;align-items:center}.notice.danger{background:#f1d8cd}.gate,.empty{text-align:center;padding:100px 20px}.gate h1,.empty h1{font-size:47px;margin:22px 0}.gate p,.empty p{color:#78816d;line-height:1.8;font-size:14px}.sigil{font-size:64px;color:#9c8547}.empty .button{display:block;width:fit-content;margin:12px auto}.gate .button,.empty .primary{margin-top:24px}
|
||
@media(max-width:700px){.topbar{height:68px;padding:0 18px;gap:10px}.brand>span{font-size:12px;letter-spacing:2px}.brand{font-size:23px;gap:9px}.status{font-size:9px}.topbar>.quiet{font-size:11px;max-width:85px;overflow:hidden}main{padding:18px 16px 105px}.character-switch{margin-bottom:25px}.hero{gap:15px;flex-wrap:wrap;margin-bottom:25px}.hero h1{font-size:34px}.hero>div:nth-child(2){flex:1;min-width:0}.hero h1{overflow-wrap:anywhere}.monogram{width:57px;height:68px;font-size:32px}.edit{width:100%;text-align:right;padding:0;min-height:24px}.combat-grid{grid-template-columns:repeat(3,1fr);gap:10px}.hp-card{grid-column:1/-1;padding:20px 24px}.hp-value{font-size:58px;margin:10px 0}.hp-footer{font-size:11px}.stat-card{padding:15px 6px;min-height:120px}.stat-card>span{font-size:8px}.stat-card strong{font-size:34px;margin:6px}.stat-card .quiet{font-size:10px;min-height:24px;padding:2px}.ability-row{gap:6px;margin-bottom:22px}.ability-row button{padding:11px 0;border-radius:8px}.ability-row strong{font-size:24px}.ability-row span{font-size:8px;letter-spacing:1px}.ability-row small{font-size:10px}.two-column{grid-template-columns:1fr;gap:0}.panel{padding:20px 17px;border-radius:12px}.section-title h2{font-size:22px}.section-title>.quiet{font-size:11px}.save-row{grid-template-columns:repeat(3,1fr)}.skill-grid{grid-template-columns:1fr 1fr;gap:2px 16px}.skill-grid button{font-size:11px;padding:12px 0}.rest-bar{flex-wrap:wrap;gap:10px}.rest-bar>span{width:100%;margin:0 0 5px}.rest-bar button{flex:1}footer{font-size:8px;letter-spacing:0;gap:10px}.overlay{align-items:flex-end;padding:0}.drawer{border-radius:22px 22px 0 0;padding:25px 20px max(25px,env(safe-area-inset-bottom));max-height:92dvh}.empty{padding:50px 8px}.empty h1,.gate h1{font-size:38px}.gate{padding-top:100px}.settings-actions>*{flex:1;min-width:45%;font-size:12px}.spell-row{align-items:flex-start}.roll-buttons button{font-size:11px}.chip{font-size:9px}}
|
||
|
||
/* Illustrated UI collection. */
|
||
body{background:#f6e6c4}
|
||
/* Paint the parchment on the document surface, not the browser canvas. */
|
||
#app{min-height:100vh;min-height:100dvh;background:#f6e6c4 url('./assets/parchment.webp') repeat;background-size:700px;background-attachment:scroll;background-position:top center}
|
||
.ui-icon{display:inline-block;width:32px;height:32px;flex-shrink:0;vertical-align:middle;overflow:hidden;pointer-events:none}
|
||
.panel,.stat-card,.drawer{background-color:rgba(255,250,232,.91);border-color:#c5ad76;box-shadow:0 2px 0 #b4986030,inset 0 1px 0 #fff9}
|
||
.panel h2{display:flex;align-items:center;gap:10px}.panel h2 .ui-icon{width:34px;height:34px}
|
||
.section-title{gap:8px}.section-title h2{line-height:1.15}
|
||
.stat-card>.ui-icon{width:42px;height:42px;margin-bottom:10px}
|
||
.label-with-icon{display:flex;align-items:center;gap:9px}.label-with-icon .ui-icon{width:34px;height:34px}
|
||
.hp-card{box-shadow:0 3px 0 #163527;border:1px solid #9d864d}
|
||
.ability-row button{background:rgba(255,250,230,.72);border-color:#cab27f;box-shadow:0 2px 0 #b4986020}
|
||
.ability-row .ui-icon{width:38px;height:38px;margin-bottom:8px}
|
||
.action-symbol.ui-icon{background:transparent;border-radius:0;padding:0;width:34px;height:34px}
|
||
.resource>.ui-icon{width:30px;height:30px}.resource-details{flex:1;min-width:0;overflow-wrap:anywhere}
|
||
.rest-bar button{display:flex;align-items:center;justify-content:center;gap:9px;border-color:#b99c5e}.rest-bar .ui-icon{width:29px;height:29px}
|
||
.bottom-nav{background:rgba(255,246,216,.97);border-color:#c4aa6f;box-shadow:0 -4px 24px #55402112}
|
||
.bottom-nav button{gap:6px;color:#665b3d;font-weight:600}.bottom-nav .ui-icon{width:35px;height:35px}
|
||
.bottom-nav button.active{background:#dddfb9;box-shadow:inset 0 0 0 1px #a7aa70}
|
||
.empty-icon{width:96px;height:96px;margin-bottom:20px}
|
||
.monogram{background:#e7d19c;border-color:#ae8c4e}.monogram span{background:#f8e8bf}
|
||
.skill-grid button:hover,.save-row button:hover{background:#f0e4bf}
|
||
@media(max-width:700px){#app{background-size:550px}.stat-card>.ui-icon{width:34px;height:34px;margin-bottom:6px}.stat-card{min-height:154px}.ability-row .ui-icon{width:29px;height:29px;margin-bottom:6px}.panel h2 .ui-icon{width:29px;height:29px}.panel h2{font-size:20px;gap:8px}.bottom-nav .ui-icon{width:34px;height:34px}.counter{gap:8px}.counter button{min-width:32px}.resource>.ui-icon{width:26px;height:26px}.section-title>.quiet{white-space:nowrap}.rest-bar .ui-icon{width:26px;height:26px}}
|
||
|
||
/* Keep the illustrated folio style through the working UI. */
|
||
[hidden]{display:none!important}
|
||
button,.button{border-color:#a7884d;background:linear-gradient(#fff0c9,#ead39d);box-shadow:inset 0 1px 0 #fff9,0 2px 0 #98743735}
|
||
button:hover,.button:hover{background:linear-gradient(#fff6da,#f2dfb2)}
|
||
.primary{color:#fff3cf;border:1px solid #a18c48;background:linear-gradient(#375d3e,#203c2b);box-shadow:inset 0 0 0 2px #d7b66530,0 3px 0 #172d22}
|
||
.primary:hover{background:linear-gradient(#476d4b,#294b35)}
|
||
.quiet,.edit,.close,.action-row,.skill-grid button{background:transparent;box-shadow:none}
|
||
.quiet:hover,.edit:hover,.close:hover{background:#b68a3430}
|
||
.overlay{background:#142718c9;backdrop-filter:blur(3px)}
|
||
.drawer{background:#f3dfa8 url('./assets/parchment.webp') repeat;background-size:600px;border:1px solid #b88b40;border-top:3px solid #cfac62;border-radius:20px 20px 12px 12px;box-shadow:0 20px 80px #08170ab3,inset 0 0 0 5px #fff4cd55,inset 0 0 35px #a46d2438;padding:24px;scroll-padding-top:90px}
|
||
.drawer-heading{position:sticky;top:-24px;margin:-24px -24px 20px;padding:18px 24px 14px;z-index:2;background:linear-gradient(#f3dfa8f5,#f5e5bdf5);border-bottom:1px solid #a37c3f;box-shadow:0 3px 10px #6b471218}
|
||
.drawer-heading h2{display:flex;align-items:center;gap:11px;font-family:Georgia,serif;color:#233e2c;font-size:27px}
|
||
.drawer-heading .ui-icon{width:40px;height:40px}
|
||
.close{border:1px solid #9d773e;background:#f4dfaa;border-radius:50%;width:44px;height:44px;padding:0;color:#3c4c2e;flex-shrink:0;box-shadow:inset 0 0 0 3px #fff0c85c,0 2px 0 #76552e40}
|
||
.drawer label{color:#594a2d;font-size:12px;font-weight:650}
|
||
input:not([type=checkbox]),select,textarea{border:1px solid #b49254;border-bottom:2px solid #9f7d43;background:linear-gradient(#fff5dcd9,#fff1ced9);box-shadow:inset 0 2px 5px #86612d16,0 1px 0 #fff8;color:#283c28;border-radius:6px;padding:12px;font-size:16px}
|
||
input::placeholder,textarea::placeholder{color:#88704b;font-style:italic;font-size:13px;opacity:1}
|
||
input:focus,select:focus,textarea:focus{background:#fff5db;border-color:#567143}
|
||
input[type=checkbox]{accent-color:#3b603d}
|
||
.drawer .hint{color:#655538}
|
||
.drawer .roll-result{background:#fff0c0;border:1px solid #b08b45;box-shadow:inset 0 0 0 4px #fff5d480;color:#2f462c}
|
||
.drawer .preview-row,.drawer .resource{border-color:#b58c4555}
|
||
.editor-intro{display:flex;align-items:center;gap:15px;margin:2px 0 24px}
|
||
.editor-intro>.ui-icon{width:76px;height:90px;filter:drop-shadow(0 3px 2px #71502430)}
|
||
.editor-intro h3{font-family:Georgia,serif;font-size:27px;line-height:1.1;font-weight:400;margin:0 0 7px;color:#28432c}
|
||
.editor-intro .eyebrow{font-size:8px;letter-spacing:1.6px;color:#725b2f;margin-bottom:7px}
|
||
.editor-intro p:last-child{font-size:12px;line-height:1.5;color:#6b5b39;margin:0}
|
||
.folio-section{min-width:0;margin:0 0 22px;padding:15px 14px 0;border:1px solid #ab8347;border-radius:6px 14px 6px 14px;background:linear-gradient(120deg,#fff5d687,#f8e7b448);box-shadow:inset 0 0 0 3px #fff3d159,0 2px 3px #8c64251a}
|
||
.folio-section legend{display:flex;align-items:center;gap:9px;padding:0 8px 0 3px;color:#355136;font-family:Georgia,serif;font-size:22px}
|
||
.folio-section legend .ui-icon{width:37px;height:37px;filter:drop-shadow(0 2px 1px #78592230)}
|
||
.folio-section .form-grid{gap:12px}
|
||
.field-caption{display:flex;align-items:center;gap:7px;min-height:31px}
|
||
.field-caption .ui-icon{width:29px;height:29px}
|
||
.ability-fields label{padding:4px 7px 9px;text-align:center;background:#e4c88355;border:1px solid #b38b485c;border-radius:7px}
|
||
.ability-fields .field-caption{justify-content:center;flex-direction:column;gap:5px;font-size:10px;letter-spacing:1.5px}
|
||
.ability-fields .ui-icon{width:42px;height:42px}
|
||
.ability-fields input{text-align:center;padding:8px 3px;font-family:Georgia,serif;font-size:24px;min-height:46px}
|
||
.folio-section .check-row{gap:10px;padding:4px 0 8px}
|
||
.folio-section .check-row label{padding:9px 10px;margin:0 0 8px;background:#fff0c37d;border:1px solid #b39256;border-radius:6px}
|
||
.folio-submit{position:sticky;bottom:-24px;margin:0 -24px -24px;padding:12px 24px 24px;background:linear-gradient(#f5e2b900,#f3dfa8 30%);z-index:1}
|
||
.folio-submit .wide{margin:0;display:flex;align-items:center;justify-content:center;gap:12px;font-family:Georgia,serif;font-size:20px;min-height:58px}
|
||
.folio-submit .ui-icon{width:32px;height:32px}.folio-submit span{font-size:14px;color:#dec479;margin-left:auto}.folio-submit .ui-icon{margin-right:auto}
|
||
@media(max-width:700px){.drawer{padding:20px 16px max(20px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0;max-height:94dvh;background-size:500px}.drawer-heading{top:-20px;margin:-20px -16px 18px;padding:13px 16px 12px}.drawer-heading h2{font-size:24px}.drawer-heading .ui-icon{width:36px;height:36px}.editor-intro{gap:12px;margin-bottom:20px}.editor-intro>.ui-icon{width:65px;height:78px}.editor-intro h3{font-size:25px}.folio-section{padding:12px 11px 0;margin-bottom:20px}.folio-section legend{font-size:21px}.folio-section legend .ui-icon{width:33px;height:33px}.ability-fields .ui-icon{width:37px;height:37px}.folio-submit{bottom:-20px;margin:0 -16px -20px;padding:12px 16px max(20px,env(safe-area-inset-bottom))}.folio-section .form-grid{gap:10px}}
|
||
/* Navigation icons sit on one shared bar, without individual button frames. */
|
||
.bottom-nav button{box-shadow:none;border:0;background:transparent;border-radius:12px}
|
||
.bottom-nav button:hover{background:#b9ae7420;box-shadow:none}
|
||
.bottom-nav button.active{background:#d9ddb1;box-shadow:none;color:#284e3d}
|
||
.bottom-nav .ui-icon{width:35px;height:35px}
|
||
.workspace-tabs{display:flex;gap:10px;margin-bottom:24px}.workspace-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;background:#faeac47d;box-shadow:none;border-color:#b19459}.workspace-tabs button.active{background:#35543a;color:#fff0c8;border-color:#9e8648}.workspace-tabs .ui-icon{width:30px;height:30px}.campaign-welcome{text-align:center}.campaign-welcome>.ui-icon{width:75px;height:75px;margin:10px}.campaign-welcome h1{font-size:36px}.campaign-card{display:flex;align-items:center;gap:15px;width:100%;text-align:left;margin-bottom:14px}.campaign-card>.ui-icon{width:44px;height:44px}.campaign-card>span:nth-child(2){flex:1}.campaign-card small,.member-entry small,.encounter-entry small{display:block;font-size:12px;font-weight:400;margin-top:6px;color:#6b674a}.campaign-toolbar{display:flex;justify-content:space-between;margin-bottom:20px}.campaign-emblem{width:75px;height:80px}.campaign-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:12px;scrollbar-width:thin}.campaign-tabs button{white-space:nowrap;font-size:12px;box-shadow:none;background:#f8e9c3}.campaign-tabs button.active{background:#d9ddb1;border-color:#6c7b48}.campaign-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:13px 0}.campaign-actions button{font-size:12px;padding:9px 12px}.campaign-actions>label{margin:0}.campaign-actions>input{width:60%;flex:1}.campaign-prose{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.75}.party-entry,.member-entry,.encounter-entry{border-top:1px solid #b4915359;padding:15px 0}.party-entry h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:0}.party-stats{display:flex;flex-wrap:wrap;gap:18px}.party-stats>span{display:flex;gap:7px;align-items:center;font-size:14px}.party-stats .ui-icon{width:27px;height:27px}.party-stats small{font-size:10px}.inline-check{display:flex;align-items:center;gap:9px;line-height:1.6}.inline-check input{flex-shrink:0}.member-entry{display:flex;justify-content:space-between;gap:12px;align-items:center}.encounter-entry.current{background:#dce0b5;border:1px solid #9ba969;border-radius:8px;padding:13px;margin-top:8px}.invite-code{display:block;user-select:all;overflow-wrap:anywhere;padding:15px;margin-top:18px;background:#f5e6bf;border:1px solid #b38e4d;border-radius:6px;font-size:12px}.campaign-workspace .panel{background:linear-gradient(120deg,#fff7dfed,#f8e8bdeb)}
|
||
@media(max-width:700px){.workspace-tabs button{font-size:12px;padding:10px}.campaign-welcome h1{font-size:30px}.campaign-emblem{width:55px;height:65px}.campaign-tabs{margin-right:-16px;padding-right:16px}.member-entry{align-items:flex-start;flex-wrap:wrap}.member-entry .campaign-actions{margin:5px 0 0}.party-entry .section-title{align-items:flex-start;flex-wrap:wrap}.campaign-workspace .section-title h2{font-size:22px}.campaign-workspace .panel>h2{margin-bottom:18px}}
|
||
|
||
/* Open folio: restrained navigation and parchment action entries. */
|
||
.workspace-tabs{display:flex;gap:16px;border-bottom:1px solid #a8884d;margin-bottom:16px;padding:0 4px 9px;position:relative}
|
||
.workspace-tabs:after,.folio-heading:after{content:'◇';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);color:#94733e;background:#f5e2b5;padding:0 8px;font-size:16px;line-height:16px}
|
||
.workspace-tabs button{flex:1;border:0;border-radius:0;background:transparent;box-shadow:none;padding:8px 6px;min-height:48px;color:#6f6343;position:relative}
|
||
.workspace-tabs button:hover{background:#ac86391a}.workspace-tabs button.active{background:transparent;color:#253c32;box-shadow:none}
|
||
.workspace-tabs button.active:after{content:'';position:absolute;bottom:0;left:28%;right:28%;height:3px;background:#37583f;border-radius:2px}
|
||
.character-switch{margin-bottom:22px}.hero{margin-bottom:26px}.hero .edit{min-height:44px}
|
||
.actions-folio{margin:0 0 26px;padding:0;min-width:0}
|
||
.folio-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;border-top:1px solid #ad8d51;border-bottom:1px solid #ad8d51;padding:18px 0;margin-bottom:10px}
|
||
.folio-heading h2{display:flex;align-items:center;gap:14px;font-size:30px;line-height:1.2}.folio-heading h2 .ui-icon{width:48px;height:48px}
|
||
.folio-add{font-size:15px;color:#284e3d;flex-shrink:0;min-height:44px;padding:8px}
|
||
.folio-empty{text-align:center;max-width:440px;margin:auto;padding:34px 12px 38px}.folio-empty>.ui-icon{width:88px;height:88px;margin-bottom:12px}
|
||
.folio-empty h3{font-family:Georgia,serif;font-size:25px;font-weight:400;line-height:1.3;margin:0 0 12px}.folio-empty p{font-size:14px;line-height:1.7;color:#6e6549;margin:0 auto 24px;max-width:340px}.folio-empty .primary{padding:12px 18px}
|
||
.folio-action{border-bottom:1px solid #b49761;padding:20px 0 10px}.folio-action-main{display:flex;gap:15px;align-items:center}.folio-action-icon{width:42px;height:42px}.folio-action-copy{flex:1;min-width:0;overflow-wrap:anywhere}
|
||
.folio-action h3{font-family:Georgia,serif;font-size:25px;font-weight:400;line-height:1.2;margin:0 0 6px}.folio-action p{margin:4px 0}.folio-modifier{font-size:13px;color:#6e6549}.folio-damage{font-family:Georgia,serif;font-size:17px;line-height:1.4}
|
||
.folio-roll{display:flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;min-height:44px;padding:9px 13px}.folio-roll .ui-icon{width:22px;height:22px}
|
||
.folio-options{margin-left:57px;font-size:13px;color:#635b43}.folio-options summary{cursor:pointer;min-height:44px;padding:14px 0;width:fit-content}.folio-options summary:focus-visible{outline:3px solid #b78a3e;outline-offset:3px}
|
||
.folio-options .folio-action-notes{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;background:#c19d4420;border-left:2px solid #a3874e;padding:12px 15px;color:#4e503d}.folio-tools{display:flex;gap:12px}.folio-tools .quiet{min-height:44px;padding-left:0}
|
||
.bottom-nav{border-radius:0;border-left:0;border-right:0;border-top:1px solid #ad8d51;box-shadow:none;backdrop-filter:none;padding-top:6px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:#fff3d3f7}
|
||
.bottom-nav button,.bottom-nav button:hover{box-shadow:none;background:transparent;min-height:62px}.bottom-nav button.active{background:#dce0b4;box-shadow:none;border-radius:8px}
|
||
@media(max-width:700px){.workspace-tabs{gap:10px;padding-bottom:9px}.workspace-tabs button{font-size:13px;padding:8px 4px}.workspace-tabs .ui-icon{width:32px;height:32px}.hero{gap:12px;margin-bottom:22px}.hero .edit{margin-top:0;padding:8px 0}.folio-heading{padding:14px 0}.folio-heading h2{font-size:27px;gap:10px}.folio-heading h2 .ui-icon{width:40px;height:40px}.folio-action-main{gap:10px}.folio-action-icon{width:33px;height:33px}.folio-action h3{font-size:22px}.folio-options{margin-left:43px}.folio-roll{padding:9px 11px;font-size:13px}.folio-roll .ui-icon{width:20px;height:20px}.folio-empty{padding:28px 6px 32px}.folio-empty h3{font-size:24px}.bottom-nav{width:100%}.bottom-nav .ui-icon{width:34px;height:34px}}
|
||
@media(max-width:360px){.folio-action-icon{display:none}.folio-options{margin-left:0}.folio-roll .ui-icon{display:none}.folio-action h3{font-size:21px}}
|
||
|
||
/* Spellbook chapters share the action folio, with preparation kept explicit. */
|
||
.folio-spell-hint{font-size:13px;line-height:1.7;color:#6e6549;margin:16px 0 20px}
|
||
.spell-chapter{margin:24px 0}.spell-chapter .spell-chapter-title{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#78643b;margin:0;padding:10px 0;border-bottom:1px solid #ad8d51}
|
||
.spell-prepare{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;flex-shrink:0;min-width:68px;min-height:52px;margin:0;color:#4c6140;font-size:11px;cursor:pointer;padding:6px}
|
||
.spell-prepare input[type=checkbox]{width:22px;height:22px;min-height:22px;cursor:pointer}.folio-spell .folio-options .folio-spell-hint{margin:4px 0 8px}
|
||
@media(max-width:700px){.spell-chapter{margin:20px 0}.spell-prepare{min-width:60px;font-size:10px;padding:4px}.folio-spell .folio-action-main{gap:10px}}
|
||
|
||
.folio-heading-tools{display:flex;align-items:center;gap:4px}.folio-heading-tools .quiet{min-height:44px;white-space:nowrap}.folio-empty>.quiet{display:block;margin:10px auto 0}.rules-picker{max-width:680px}.rules-result{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;border:0;border-bottom:1px solid #ad8d51;border-radius:0;background:transparent;box-shadow:none;padding:15px 0}.rules-result:hover{background:#ad8d5118}.rules-result b{font-family:Georgia,serif;font-size:21px;font-weight:400;overflow-wrap:anywhere}.rules-result small{display:block;color:#6e6549;font-size:12px;margin-top:5px}.catalogue-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:22px 0}.catalogue-pages button{padding:9px 12px}.rules-entry-name{margin-top:20px;font-size:29px}.rules-description{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7}.rules-source{display:block;margin:22px 0;color:#284e3d;font-size:13px}.rules-attribution{margin-top:26px;border-top:1px solid #ad8d51;padding-top:14px;font-size:11px;line-height:1.6;overflow-wrap:anywhere}.rules-attribution summary{cursor:pointer;min-height:44px;padding:12px 0}.rules-attribution summary:focus-visible{outline:3px solid #b78a3e}.rules-attribution p{margin:10px 0}@media(max-width:420px){.folio-heading-tools{gap:0}.folio-heading-tools .quiet{font-size:11px;padding:8px 4px}.folio-heading h2{font-size:25px}.folio-heading h2 .ui-icon{width:33px;height:33px}.rules-picker{padding:20px}.catalogue-pages button{font-size:12px}}
|
||
|
||
.inventory-quantity{display:flex;align-items:center;gap:3px;flex-shrink:0}.inventory-quantity button{min-width:36px;min-height:44px;font-size:20px;padding:6px}.inventory-quantity span{min-width:24px;font-size:15px;text-align:center;font-weight:600}.inventory-flags{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0}.inventory-flags label{display:flex;align-items:center;gap:8px;min-height:44px;margin:0}.inventory-source{font-size:11px;color:#6e6549;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.inventory-notebook{border-top:1px solid #ad8d51;padding:16px 0;margin-top:26px}.inventory-notebook summary{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px;font-family:Georgia,serif;font-size:21px}.inventory-notebook summary:after{content:'＋';margin-left:auto;font-family:system-ui;font-size:19px}.inventory-notebook[open] summary:after{content:'−'}.inventory-notebook summary:focus-visible{outline:3px solid #b78a3e}.inventory-notebook summary .ui-icon{width:30px;height:30px}.inventory-notebook textarea{background:#fff3d366;border-radius:3px}.inventory-entry .folio-action-copy{align-self:center}@media(max-width:420px){.inventory-entry .folio-action-icon{display:none}.inventory-entry .folio-options{margin-left:0}.inventory-quantity{gap:0}.inventory-quantity button{min-width:32px;padding:5px}.inventory-entry .folio-action-main{gap:8px}.inventory-entry h3{font-size:21px}}
|
||
|
||
/* A campaign fieldbook: ink divisions and compact table controls. */
|
||
.campaign-workspace .panel{background:transparent;border:0;border-radius:0;box-shadow:none;padding:20px 0;margin:0 0 22px;border-bottom:1px solid #ad8d5180}
|
||
.campaign-workspace .campaign-welcome{text-align:center;padding:30px 0}.campaign-welcome>.ui-icon{width:72px;height:72px;margin-bottom:16px}
|
||
.campaign-workspace .campaign-card{width:100%;background:transparent;border:0;border-bottom:1px solid #ad8d5180;border-radius:0;box-shadow:none;margin:0;padding:18px 0;text-align:left}.campaign-card b{font-family:Georgia,serif;font-size:24px;font-weight:400}
|
||
.campaign-workspace .hero{margin-bottom:18px}.campaign-workspace .hero h1{overflow-wrap:anywhere}.campaign-toolbar{margin-bottom:20px}.campaign-toolbar .quiet{padding-left:0}
|
||
.campaign-tabs.fieldbook-tabs{margin:0 0 28px;padding:0;gap:0;overflow:visible;border-block:1px solid #ad8d5180}
|
||
.fieldbook-tabs button{flex:1;min-width:0;min-height:64px;padding:8px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:8px;color:#6d6246;position:relative}
|
||
.fieldbook-tabs button .ui-icon{width:30px;height:30px}.fieldbook-tabs button.active{background:transparent;color:#253c32;border:0}.fieldbook-tabs button.active:after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:3px;background:#37583f;border-radius:2px}
|
||
.campaign-subnav{display:flex;gap:12px;margin:0 0 20px;border-bottom:1px solid #ad8d5140}.campaign-subnav .selected{color:#253c32;text-decoration:underline;text-underline-offset:8px}
|
||
.campaign-workspace .folio-heading h2{display:flex;align-items:center;gap:10px}.campaign-workspace .folio-heading h2 .ui-icon{width:36px;height:36px}
|
||
.fieldbook-fold{border-bottom:1px solid #ad8d5180;margin:16px 0 26px;padding:0 0 12px}.fieldbook-fold>summary{min-height:52px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Georgia,serif;font-size:23px}.fieldbook-fold>summary:after{content:'＋';margin-left:auto;font-family:system-ui;font-size:19px}.fieldbook-fold[open]>summary:after{content:'−'}.fieldbook-fold>summary .ui-icon{width:32px;height:32px}.fieldbook-fold .panel{border:0;margin-bottom:0}.fieldbook-fold>summary:focus-visible,.combatant-options>summary:focus-visible,.past-encounter>summary:focus-visible{outline:3px solid #b78a3e;outline-offset:3px}
|
||
.party-owner{font-size:12px;color:#6d6246;margin:0 0 15px}.campaign-workspace .party-stats{flex-wrap:wrap;gap:12px 20px}.campaign-workspace .party-entry .section-title{margin-bottom:8px}
|
||
.encounter-turn{font-family:Georgia,serif;font-size:27px;margin:12px 0}.encounter-turn small{font-family:system-ui;font-size:12px;color:#6d6246;white-space:nowrap;margin-left:10px}
|
||
.campaign-workspace .encounter-entry{display:block}.campaign-workspace .encounter-entry.current{border:0;border-left:3px solid #547047;border-radius:0;background:#dce0b466;padding:14px 12px;margin:0}.combatant-line{display:flex;align-items:center;gap:12px}.initiative-number{font-family:Georgia,serif;font-size:26px;min-width:28px;text-align:center;color:#6d6246}.combatant-copy{flex:1;min-width:0}.combatant-copy b{font-family:Georgia,serif;font-size:23px;font-weight:400;overflow-wrap:anywhere}.combatant-copy b small{font-family:system-ui;font-size:10px;color:#37583f}.combatant-copy>span{display:block;font-size:12px;color:#6d6246;margin-top:6px}.combatant-line .campaign-actions{flex-shrink:0;gap:0}
|
||
.condition-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0 40px}.condition-chip,.quiet.condition-chip{font-size:11px;background:#f2dfae;border:1px solid #a68b51;border-radius:4px;box-shadow:none;padding:8px 10px;min-height:32px;color:#53492e}.quiet.condition-chip{min-height:44px}.combatant-options{margin:8px 0 0 40px}.combatant-options>summary{min-height:44px;font-size:12px;color:#6d6246;cursor:pointer;padding:10px 0}.combatant-options label{font-size:12px}.combatant-options .campaign-actions{display:flex;flex-wrap:nowrap}.combatant-options input{min-width:0;flex:1}.encounter-controls{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:24px 0 10px}.encounter-controls label{flex:1;max-width:230px;margin:0;font-size:12px}
|
||
.agenda-entry{border-bottom:1px solid #ad8d5180;padding:16px 0}.agenda-entry h3{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:0}.session-agenda{margin:26px 0}.campaign-workspace .campaign-prose{overflow-wrap:anywhere}.past-encounter{padding:14px 0;border-bottom:1px solid #ad8d5140}.past-encounter summary{min-height:44px;cursor:pointer;font-family:Georgia,serif;font-size:22px}.past-encounter p{font-size:13px}.session-quick-note textarea{background:#fff3d366}
|
||
@media(max-width:700px){.fieldbook-tabs button{flex-direction:column;gap:4px;font-size:11px;min-height:68px}.fieldbook-tabs button .ui-icon{width:28px;height:28px}.campaign-workspace .hero h1{font-size:34px}.campaign-workspace .section-title h2{font-size:24px}.campaign-workspace .folio-heading h2{font-size:27px}.campaign-workspace .campaign-emblem{width:50px;height:58px}}
|
||
@media(max-width:420px){.combatant-line{flex-wrap:wrap;gap:8px}.combatant-line .campaign-actions{width:100%;margin-left:36px}.combatant-line .quiet{padding:6px 12px 6px 0}.combatant-copy b{font-size:22px}.combatant-options,.condition-chips{margin-left:36px}.encounter-controls label{flex-basis:100%;max-width:none}.campaign-workspace .section-title h2{font-size:22px}.campaign-workspace .folio-heading h2{font-size:25px}}
|
||
|
||
/* Prepared session scenes share the same open parchment surface. */
|
||
.working-session-label{max-width:560px;margin-bottom:26px;color:#6d6246;font-size:12px}.working-session-label select{margin-top:8px}
|
||
.session-preparation{margin:28px 0 34px}.scene-entry{padding:18px 0;border-bottom:1px solid #ad8d5180}.scene-entry.current{border-left:3px solid #547047;padding-left:14px;background:#dce0b430}.scene-entry h3{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0;overflow-wrap:anywhere}.scene-number{margin-right:10px;color:#94733e}.scene-entry .section-title{align-items:flex-start;flex-wrap:wrap}.scene-controls{gap:6px 14px}.scene-screen{margin:10px 0 14px}.scene-screen>summary,.scene-link>summary,.prepared-entry>summary{cursor:pointer;min-height:44px;padding:12px 0;color:#6d6246}.scene-screen>summary:focus-visible,.scene-link>summary:focus-visible,.prepared-entry>summary:focus-visible{outline:3px solid #b78a3e;outline-offset:3px}.scene-screen>.campaign-prose{border-left:2px solid #a3874e;padding:10px 14px;background:#c19d4418}.scene-link{border-top:1px solid #ad8d5140}.scene-link .ui-icon{width:25px;height:25px;margin-right:8px}.prepared-row{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid #ad8d5140;min-height:54px}.prepared-row span{font-family:Georgia,serif;font-size:21px;overflow-wrap:anywhere}.prepared-entry{padding:10px 0;border-bottom:1px solid #ad8d5180}.prepared-entry>summary{font-family:Georgia,serif;font-size:24px;overflow-wrap:anywhere}.prepared-entry summary small{font-family:system-ui;font-size:11px;margin-left:10px;color:#6d6246}.prepared-entry p{font-size:13px;line-height:1.6}.preparation-editor{border-left:2px solid #ad8d5166!important;padding-left:16px!important}.preparation-editor .section-title{flex-wrap:wrap}.session-preparation>.folio-heading{margin-top:26px}.session-preparation .folio-heading h2{font-size:27px}@media(max-width:420px){.session-preparation .folio-heading h2{font-size:23px}.session-preparation .folio-heading h2 .ui-icon{width:30px;height:30px}.session-preparation .folio-heading .quiet{font-size:12px}.scene-entry h3{font-size:24px}.prepared-entry>summary{font-size:22px}.prepared-entry summary small{display:block;margin:6px 0 0}.prepared-row{flex-wrap:wrap;gap:0;padding-top:10px}}
|
||
|
||
/* Catalogue paper follows its inner scroll, independently of the page behind it. */
|
||
.rules-picker{background-attachment:local;overscroll-behavior-y:contain}
|
||
|
||
.coin-purse{border-bottom:1px solid #ad8d5180;padding:8px 0 22px;margin-bottom:26px}.coin-purse h3{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:0}.coin-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.coin-denomination{display:flex;align-items:center;flex-direction:column;gap:7px;padding:12px 0}.coin-token{width:42px;height:42px;display:grid;place-items:center;border:2px solid #987039;border-radius:50%;box-shadow:inset 0 0 0 3px #fff5d46b,0 2px 0 #70532a30;font-family:Georgia,serif;font-size:12px;font-weight:700;color:#614b25;background:#e8c66b}.coin-token.sp{background:#d2d5cd;border-color:#87918a;color:#47544b}.coin-token.cp{background:#d49c71;border-color:#98603c;color:#684225}.coin-name{font-size:12px;color:#6d6246}.coin-denomination strong{font-family:Georgia,serif;font-size:28px;font-weight:400;overflow-wrap:anywhere;text-align:center}.coin-controls{display:flex;gap:8px}.coin-controls button{min-width:44px;min-height:44px;font-size:22px;padding:6px}.purse-total{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #ad8d5140;padding-top:14px}.purse-total p{font-size:13px;margin:0}.purse-total strong{display:block;font-family:Georgia,serif;font-size:25px;font-weight:400;margin-top:5px}.purse-total label{font-size:11px;max-width:170px;margin:0}.purse-total input{margin-top:6px}.coin-exchange{font-size:11px;margin-bottom:0}.coin-edit-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.purse-editor{border-top:1px solid #ad8d5140;margin-top:18px;padding-top:16px}@media(max-width:420px){.coin-row{gap:6px}.coin-denomination strong{font-size:24px}.coin-edit-fields{grid-template-columns:1fr}.purse-total label{max-width:140px}}
|
||
|
||
|
||
/* Mounts and pets live on the same continuous parchment as equipment. */
|
||
.gear-subnav{display:flex;gap:12px;margin:10px 0 24px;border-bottom:1px solid #ad8d5180;padding-bottom:12px}
|
||
.gear-subnav button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:9px 14px;border:1px solid #9e7e4766;background:#e9d4a466;color:#58472d;border-radius:6px;font-family:Georgia,serif;font-size:17px;cursor:pointer}
|
||
.gear-subnav button.active{background:#dfc18b;border-color:#927038;box-shadow:inset 0 0 0 1px #fff3d880}
|
||
.gear-subnav .ui-icon{width:27px;height:27px}.gear-count{display:inline-grid;place-items:center;min-width:24px;border-radius:20px;padding:2px 6px;background:#97734230;font-family:system-ui;font-size:12px}
|
||
.companions-folio .folio-heading{flex-wrap:wrap}.companions-folio .folio-heading-tools{display:flex;gap:8px;flex-wrap:wrap}
|
||
.companion-entry{padding:20px 0 24px;border-bottom:1px solid #ad8d5180}
|
||
.companion-heading{display:flex;align-items:center;gap:12px}.companion-emblem{width:48px;height:48px;border:2px solid #8c6e3b;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#d5b47755;color:#72552e;font-size:29px}
|
||
.companion-intro{flex:1;min-width:0}.companion-intro .eyebrow{font-size:10px;margin:0 0 5px;letter-spacing:1px}.companion-intro h3{font-family:Georgia,serif;font-size:27px;font-weight:400;margin:0;overflow-wrap:anywhere}
|
||
.companion-status{font-size:11px;color:#5c522e;background:#d9bf8670;border:1px solid #9e7e4766;border-radius:20px;padding:6px 9px;white-space:nowrap}.companion-status.stabled{background:#d0d8b099;color:#395b41}
|
||
.companion-location{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0;padding:14px 0;border-top:1px solid #b99c6850;border-bottom:1px solid #b99c6850}.companion-location>div{min-width:0}.companion-location small,.companion-stats small{display:block;text-transform:uppercase;font-size:10px;letter-spacing:1px;color:#756044;margin-bottom:6px}.companion-location strong{font-family:Georgia,serif;font-size:17px;font-weight:400;line-height:1.4;display:block;overflow-wrap:anywhere}.companion-location span{font-size:11px;display:block;margin-top:6px;color:#71634c}
|
||
.companion-stats{display:grid;grid-template-columns:0.75fr 1fr 1fr 1.8fr;gap:12px;align-items:center}.companion-stats strong{font-family:Georgia,serif;font-size:22px;font-weight:400;white-space:nowrap}.companion-stats em{font-style:normal;font-size:12px}.companion-hp>div{display:flex;align-items:center;gap:7px}.companion-hp button{font-size:20px;min-width:40px;min-height:44px;padding:4px 8px}.companion-hp strong{font-size:18px}
|
||
.companion-details{margin-top:18px}.companion-abilities{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:8px 0 14px}.companion-abilities>div{text-align:center;border:1px solid #b08c5670;padding:8px 2px;border-radius:4px;background:#ffedbd44}.companion-abilities small,.companion-abilities span{display:block;color:#725f3f;font-size:10px}.companion-abilities strong{display:block;font-family:Georgia,serif;font-size:21px;font-weight:400}
|
||
.companion-actions{display:flex;gap:8px 12px;flex-wrap:wrap;margin-top:12px}.companion-actions button{min-height:44px}.companion-drawer .hint{font-size:12px}.companion-drawer .folio-section{margin:16px 0}.companion-drawer .form-grid{margin-bottom:14px}.companion-drawer textarea{min-height:78px}
|
||
@media(max-width:650px){.gear-subnav{gap:7px}.gear-subnav button{font-size:14px;padding:8px 10px}.gear-subnav .ui-icon{width:22px;height:22px}.companion-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.companion-hp{grid-column:1/-1;border-top:1px solid #b99c6850;padding-top:12px}.companion-hp>div{justify-content:flex-start}.companion-actions button{flex:1}.companions-folio .folio-heading-tools{width:100%}.companions-folio .folio-heading-tools button{flex:1}}
|
||
@media(max-width:400px){.gear-subnav button{font-size:12px}.companion-heading{flex-wrap:wrap}.companion-status{margin-left:60px}.companion-location{grid-template-columns:1fr;gap:12px}.companion-intro h3{font-size:25px}}
|
||
|
||
/* Five hand-painted bag sprites share a transparent canvas and sit directly on parchment. */
|
||
.coin-bag-display{display:flex;align-items:center;justify-content:center;gap:10px;min-height:174px;margin:8px 0 13px;padding:0 8px 12px;border-bottom:1px solid #ad8d5140}
|
||
.coin-bag-art{display:block;flex:none;width:clamp(142px,39%,220px);height:auto;aspect-ratio:512/480;object-fit:contain;filter:drop-shadow(0 5px 5px #6e4b1929);transition:filter .2s ease}
|
||
.coin-bag-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;max-width:240px;color:#58462d}
|
||
.coin-bag-eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:700;color:#805e32}
|
||
.coin-bag-copy strong{font-family:Georgia,serif;font-weight:400;font-size:clamp(24px,4vw,34px);line-height:1.1}
|
||
.coin-bag-copy>span:not(.coin-bag-eyebrow){font-family:Georgia,serif;font-size:16px}
|
||
.coin-bag-copy small{color:#736045;font-size:11px;line-height:1.45}
|
||
@media(max-width:430px){.coin-bag-display{min-height:137px;gap:4px;padding-left:0;padding-right:0}.coin-bag-art{width:46%;max-width:174px}.coin-bag-copy strong{font-size:25px}.coin-bag-copy>span:not(.coin-bag-eyebrow){font-size:14px}.coin-bag-copy small{font-size:10px}}
|