/* Sacrament shared theme: colours, fonts, buttons and the torn-edge divider.
   The website, character builder and VTT all load this one file.
   Link it with: <link rel="stylesheet" href="https://playsacrament.com/theme.css"> */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=Pirata+One&display=swap');

:root{
  --bg:#0b0b0c; --bg2:#151517; --fg:#d0d0d3; --dim:#85858b; --blood:#4f3070; --blood-hi:#a07cd0; --candle:#86a35f; --line:#2c2c31;
  --display:'Pirata One','Times New Roman',serif; --body:'IM Fell English',Georgia,serif; --label:'IM Fell English SC',Georgia,serif;
  color-scheme:dark;
}
:root[data-theme="light"]{--bg:#dedee0;--bg2:#cdcdd0;--fg:#141416;--dim:#54545a;--blood:#4a2d69;--blood-hi:#4a2d69;--candle:#46602a;--line:#a9a9b0;color-scheme:light}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:19px/1.65 var(--body);margin:0}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1;margin:0;text-wrap:balance}
.label{font-family:var(--label);letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;color:var(--candle)}
a{color:var(--blood-hi)}
a:focus-visible,button:focus-visible{outline:2px solid var(--candle);outline-offset:3px}

.btn{font-family:var(--label);letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;padding:14px 26px;text-decoration:none;color:#f1eff4;background:var(--blood);
  clip-path:polygon(0 12%,6% 0,94% 8%,100% 0,97% 100%,6% 92%,0 100%);display:inline-block;border:0;cursor:pointer}
.btn:hover{background:#654090}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line);clip-path:none;color:var(--dim)}
.btn.ghost:hover{background:transparent;color:var(--candle)}

.rule{height:28px;background:var(--blood);clip-path:polygon(0 60%,4% 20%,9% 70%,15% 10%,22% 80%,29% 30%,36% 90%,44% 15%,51% 75%,58% 25%,66% 85%,73% 20%,81% 80%,88% 30%,95% 75%,100% 35%,100% 100%,0 100%);opacity:.85}

/* Shared top bar, injected by nav.js on every page */
.sac-nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;padding:6px max(16px,env(safe-area-inset-left,0px));background:var(--bg2);border-bottom:1px solid var(--line);position:relative;z-index:50}
.sac-mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:1.45rem;line-height:1;color:var(--fg);text-decoration:none;letter-spacing:.04em}
.sac-links{display:flex;gap:18px;flex-wrap:wrap;margin-right:auto;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.sac-links a{color:var(--dim);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.sac-links a:hover{color:var(--blood-hi)}
.sac-links{align-items:center}
.sac-links a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--blood-hi)}
.sac-th{font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;background:none;border:1px solid var(--line);color:var(--dim);padding:4px 10px;cursor:pointer}
.sac-th:hover{color:var(--candle);border-color:var(--candle)}

/* Nothing in a page should override the hidden attribute */
[hidden]{display:none!important}

/* Phones and touch screens: comfortable tap targets, and buttons that fill the width in a row of two */
@media (pointer:coarse){
  .btn{min-height:46px}
  .sac-links a{display:inline-block;padding:11px 4px}
  .sac-th{min-height:42px;padding:9px 14px}
  .sac-mark{padding:8px 0}
}
@media (max-width:600px){
  .btn{padding:14px 22px}
  .meta{display:flex;flex-wrap:wrap}
  .meta .btn{flex:1 1 100%;text-align:center}
  .sac-nav{gap:0 14px}
  .sac-mark{order:1}
  .sac-th{order:2;margin-left:auto}
  .sac-links{order:3;flex-basis:100%;margin-right:0}
  #sacNet{order:4;flex-basis:100%}
}