/* A map table: sage ground, deep forest green, brass. The icons carry the colour. */
:root{
  --bg:#D7DFCE;--surface:#EDF0E4;--fg:#1A261F;--muted:#55645A;--line:#B4C0AD;--accent:#1E4434;--gold:#AD8423;--alert:#92291F;--tint:#E3E4C8;
  --star:#FFD766;--on-accent:#EDF0E4;--on-gold:#1A1405;--ink:#14201A;--ink-text:#EFF2E8;
  --display:"Alegreya Sans SC","Trebuchet MS",sans-serif;--body:"Alegreya Sans","Trebuchet MS",sans-serif;
  color-scheme:light;
}
html,body,#app{height:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.35 var(--body);font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
a{color:inherit}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.frame{display:flex;flex-direction:column;min-height:100%}
.frame>*{flex:none}
.twrap{overflow:auto;max-height:82vh;cursor:grab}
.twrap.dragging,.twrap.dragging *{cursor:grabbing!important;user-select:none}
@media (min-width:900px) and (min-height:620px){.frame{height:100%}.frame>.twrap{flex:1 1 0;min-height:0;max-height:none}}
.ic{display:inline-block;flex:none;width:var(--s,24px);height:var(--s,24px);background-size:cover;background-position:center;vertical-align:middle}

/* Top of the page */
.top{display:grid;gap:8px;padding-block:calc(10px + env(safe-area-inset-top,0px)) 9px}
.head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.head h1{margin:0;font:800 26px/1 var(--display);color:var(--accent);text-wrap:balance;flex:1 1 280px;min-width:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.seg button{padding:2px 10px;font-weight:700;font-size:13px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--surface)}
.row{display:flex;flex-wrap:wrap;gap:5px 7px;align-items:center}
.search{padding:3px 9px;border:1px solid var(--line);border-radius:3px;background:var(--surface);width:150px;min-width:0}
.lab{font:700 13px var(--display);color:var(--muted);margin:0 2px 0 10px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12.5px;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.fcount{font-style:normal;font-weight:800;font-size:11px;color:var(--on-gold);background:#E2BE5C;border-radius:999px;padding:0 5px}
.btn-link{text-decoration:underline;text-underline-offset:2px;color:var(--muted);font-size:12.5px}

/* "?" card */
.about{position:relative;display:inline-flex}
.abt{width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font:700 12.5px/1 var(--body);color:var(--muted);display:grid;place-items:center}
.about:hover .abt,.abt:focus-visible{color:var(--fg);border-color:var(--muted)}
.abtcard{display:none;position:absolute;right:0;top:100%;margin-top:7px;z-index:45;width:min(340px,calc(100vw - 32px));padding:9px 12px;background:var(--ink);color:var(--ink-text);border-radius:5px;font:400 12.5px/1.38 var(--body);box-shadow:0 6px 20px rgba(8,14,12,.35)}
.abtcard p{margin:0}
.abtcard p+p{margin-top:6px}
.abtcard::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.abtcard a{color:#E2BE5C;font-weight:600}
.about:hover .abtcard,.about:focus-within .abtcard{display:block}

/* Instant tooltip */
#tip{position:fixed;left:0;top:0;z-index:60;max-width:min(340px,calc(100vw - 16px));padding:7px 10px;background:var(--ink);color:var(--ink-text);border-radius:5px;font:400 12.5px/1.32 var(--body);box-shadow:0 6px 20px rgba(8,14,12,.35);pointer-events:none;display:grid;gap:2px}
#tip[hidden]{display:none}
#tip strong{font-weight:700;font-size:13.5px}
#tip .ti{display:grid;grid-template-columns:auto 1fr;gap:5px}
#tip .ti i{font-style:normal;color:#E2BE5C}
#tip .tc{display:flex;flex-wrap:wrap;gap:2px 9px;margin-top:3px;padding-top:4px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;color:#C9D1C4}
#tip .rs{color:#F4F1E6;font-weight:500}
#tip .rs::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:var(--r)}
#tip .rs-food{--r:#E0584A}
#tip .rs-wood{--r:#B57B3F}
#tip .rs-gold{--r:#E8C04A}
#tip .rs-stone{--r:#A9ADB1}
#tip::after{content:"";position:absolute;left:var(--ax,50%);width:9px;height:9px;margin-left:-4.5px;background:inherit;transform:rotate(45deg)}
#tip[data-at="top"]::after{bottom:-4px}
#tip[data-at="bottom"]::after{top:-4px}

/* Civ sheet */
.scrim{position:fixed;inset:0;background:rgba(10,14,16,.35);z-index:50}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:51;overflow:auto;border-left:1px solid var(--line);padding:calc(16px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 24px 20px;display:flex;flex-direction:column;gap:14px}
.drawer header{display:flex;align-items:center;gap:12px}
.drawer h2{margin:0;font:700 26px/1.1 var(--display)}
.drawer .sub{color:var(--muted)}
.drawer h3{margin:0 0 4px;font:700 12px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.drawer ul{margin:0;padding-left:18px;display:grid;gap:3px}
.drawer .x{margin-left:auto;padding:4px 10px;border:1px solid var(--line);border-radius:3px}
.fambars{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;font-size:13px}
.fambars i{display:block;height:7px;background:var(--line);position:relative}
.fambars i>s{position:absolute;inset:0 auto 0 0;background:var(--accent)}

/* Table */
.dx{border-collapse:separate;border-spacing:0;background:var(--surface)}
.dx thead{position:sticky;top:0;z-index:4}
.dx th,.dx td{background:var(--surface)}
/* The civ column runs to the page edge, so nothing scrolls past it in a gutter */
.dx .civc{position:sticky;left:0;z-index:2;min-width:184px;max-width:184px;text-align:left;border-right:2px solid var(--accent);padding:6px 8px 0 max(16px,env(safe-area-inset-left,0px));vertical-align:top;border-bottom:1px solid #9DAB97}
.dx thead .civc{z-index:5;background:var(--accent);color:#DCE5D6;font:500 12px/1.2 var(--body);vertical-align:bottom;padding-bottom:6px;border-bottom:0}
.dx .fam{background:var(--accent);color:var(--on-accent);font:700 15px/1.1 var(--display);text-align:left;padding:5px 9px;white-space:nowrap;border-left:2px solid var(--surface)}
.famh{display:flex;align-items:center;gap:14px;justify-content:space-between}
.utg{padding:1px 7px;border:1px solid #6E8B79;border-radius:999px;color:#DCE5D6;font:500 11px var(--body);white-space:nowrap}
.utg[aria-pressed="true"]{background:#E2BE5C;border-color:#E2BE5C;color:var(--on-gold);font-weight:700}
.dx .hc{vertical-align:bottom;padding:5px 5px 4px;background:var(--tint);border-bottom:2px solid var(--accent);min-width:34px}
.dx .hc.t1{min-width:0;padding-left:3px;padding-right:3px}
.dx .hc.famstart,.dx td.famstart{border-left:2px solid var(--accent)}
.dx .hc.act{background:color-mix(in srgb,var(--gold) 26%,var(--tint))}
.hn{display:block;font:700 12px/1.05 var(--body);margin-bottom:3px;text-align:left;max-width:96px;min-height:25px}
.hn[data-sorted]{color:var(--alert);text-decoration:underline}
.hchain{display:flex;gap:2px;align-items:center}
.hchain .ic{--s:25px;border-radius:2px;opacity:.72;filter:grayscale(.25)}
.hchain button{display:block;line-height:0}
.hchain button:hover .ic,.hchain button.sel .ic{opacity:1;filter:none}
.hchain button.top .ic{box-shadow:0 0 0 2px var(--gold)}
.ustar{width:25px;height:25px;display:grid;place-items:center;border:1.5px dashed var(--gold);border-radius:2px;color:var(--gold);font-size:13px;line-height:1;margin-left:3px}
.ustar:hover{background:color-mix(in srgb,var(--gold) 20%,transparent)}
.ustar[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-style:solid}
.dx tbody td{padding:3px 5px;white-space:nowrap;vertical-align:top}
.dx tbody td.t1{padding-left:3px;padding-right:3px}
.dx td.act{background:color-mix(in srgb,var(--gold) 10%,var(--surface))}
.dx td.short{box-shadow:inset 0 0 0 2px var(--alert)}
.chain{display:inline-flex;gap:2px;align-items:center}
.chain .ic{--s:25px;border-radius:2px}
.chain .ic.off{filter:grayscale(1);opacity:.28}
.uuc,.bup{position:relative;display:inline-block;line-height:0}
.uuc{margin-left:3px}
.uuc::after,.bup::after{content:"★";position:absolute;right:-2px;top:-3px;font-size:14px;line-height:14px;color:var(--star);text-shadow:0 0 2px #000,0 0 2px #000,0 0 1px #000}
.uuc.count .ic{box-shadow:0 0 0 2px var(--gold)}
.uuempty{display:inline-block;width:25px;margin-left:3px}
.dx tbody td.bs{white-space:normal;padding:0 7px 7px;border-bottom:1px solid #9DAB97}
.bs>div{width:0;min-width:100%;font-size:12px;line-height:1.22}
.bi+.bi::before{content:" · ";color:var(--muted);font-weight:700}
.bs b,.civgen b{color:var(--accent)}
.civbtn{display:flex;align-items:center;gap:7px;width:100%;text-align:left;min-width:0;--s:30px}
.civname{display:block;font:700 15.5px/1.05 var(--display);white-space:nowrap}
.civsub{display:block;max-width:128px;font-size:11px;line-height:1.1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.civsub.lack{color:var(--alert);font-weight:700;white-space:normal}
.civgen{white-space:normal;font-size:11.5px;line-height:1.18;margin-top:4px;padding-bottom:5px}
.dx tr.m1 td>*{opacity:.66}
.dx tr.m2 td>*{opacity:.42}
.dx tr.m3 td>*{opacity:.26}
.dx tr.m1 .civc>*,.dx tr.m2 .civc>*{opacity:.85}
.dx tr.m3 .civc>*{opacity:.68}
.dx tr[class^="m"] td.short>*{opacity:.9}
.dx tbody.civg:hover td{background:var(--tint)}
.dx tbody.civg:hover td>*{opacity:1}
.dx tr.sepd td{padding-top:6px;padding-bottom:3px;font:700 13.5px var(--display);color:var(--accent);background:var(--bg);border-bottom:1px solid var(--accent);white-space:nowrap}
.dx tr.sepd .civc{border-right:0;max-width:none;overflow:visible}
@media (max-width:640px){
  .dx .civc{min-width:124px;max-width:124px;padding-left:max(8px,env(safe-area-inset-left,0px))}
  .civbtn{--s:22px}
  .civname{white-space:normal;font-size:13.5px}
  .civsub:not(.lack){display:none}
  .head h1{font-size:21px;flex-basis:100%}
  .about{margin-left:auto}
  .lab{margin-left:0}
}
@media (prefers-reduced-motion:no-preference){.chain .ic{transition:opacity .12s}}