/* Card Monarchy wiki — palette drawn from the game's own assets: the card-art
   ground (#1B2230), the UI chrome gold, and Spades purple. Georgia is the
   game's own display face (see tools/render_balance_curve.ps1). */
:root{
  --ground:#12151C; --panel:#191D26; --panel-2:#1F242F; --rule:#2C3341;
  --ink:#E9E5DA; --ink-2:#A8AEBC; --ink-3:#727A8A;
  --gild:#E3C33C; --gild-dim:#8A7526;
  --hearts:#D9556E; --diamonds:#D9A23C; --clubs:#5FA88A; --spades:#A175FF;
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 12px 32px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: light){
  :root{
    --ground:#E7E8EE; --panel:#FFFFFF; --panel-2:#F2F3F7; --rule:#D3D6E0;
    --ink:#161A22; --ink-2:#4E5566; --ink-3:#7A8294;
    --gild:#8A6F12; --gild-dim:#B9A55E;
    --hearts:#B02040; --diamonds:#8A6412; --clubs:#2F7358; --spades:#6B3FD4;
    --shadow:0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(20,24,34,.12);
  }
}
:root[data-theme="dark"]{
  --ground:#12151C; --panel:#191D26; --panel-2:#1F242F; --rule:#2C3341;
  --ink:#E9E5DA; --ink-2:#A8AEBC; --ink-3:#727A8A;
  --gild:#E3C33C; --hearts:#D9556E; --diamonds:#D9A23C; --clubs:#5FA88A; --spades:#A175FF;
}
:root[data-theme="light"]{
  --ground:#E7E8EE; --panel:#FFFFFF; --panel-2:#F2F3F7; --rule:#D3D6E0;
  --ink:#161A22; --ink-2:#4E5566; --ink-3:#7A8294;
  --gild:#8A6F12; --hearts:#B02040; --diamonds:#8A6412; --clubs:#2F7358; --spades:#6B3FD4;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px; margin:0 auto; padding:32px 22px 80px}
h1,h2,h3,.serif{font-family:Georgia,"Iowan Old Style",Cambria,serif; text-wrap:balance}
a{color:var(--gild); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gild); outline-offset:2px}

/* masthead + nav */
header.mast{border-bottom:2px solid var(--gild); padding-bottom:16px; margin-bottom:26px}
.suits{font-size:19px; letter-spacing:.45em; color:var(--gild); line-height:1}
h1{font-size:clamp(26px,4vw,38px); margin:10px 0 4px; font-weight:600}
nav{display:flex; gap:20px; margin-top:16px; flex-wrap:wrap; font-size:14px}
nav a{color:var(--ink-2); padding-bottom:3px; border-bottom:2px solid transparent}
nav a:hover{color:var(--ink); text-decoration:none}
nav a[aria-current="page"]{color:var(--gild); border-bottom-color:var(--gild)}

h2{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gild);
   margin:38px 0 10px; font-family:"Segoe UI",sans-serif; font-weight:600}
.note{color:var(--ink-2); max-width:68ch}

/* Overview hero. That page used to open on nothing but rule tiles -- accurate,
   but arithmetic is a poor first impression of a game whose entire pitch is
   that it is made of playing cards. The image is cut 2.635:1, the one ratio
   that keeps both the cover's title block and the figures' feet at full source
   width. Served at 2240px so it stays sharp on a 2x display at the 1120px
   column. The lede is the sentence the page never had. */
.hero{
  display:block; width:100%; height:auto; border-radius:4px;
  border:1px solid var(--rule); box-shadow:var(--shadow); margin:0 0 22px;
}
.lede{
  font-family:Georgia,"Iowan Old Style",Cambria,serif;
  font-size:19px; line-height:1.55; color:var(--ink); max-width:60ch; margin:0 0 14px;
}

/* filter bar */
/* Studio strip: this wiki is a subsite of the mAInely Games site, so every
   page carries a way back up. Deliberately quiet -- it is wayfinding, not a
   second navigation bar competing with the game's own. */
.studiobar{padding:10px 0 0; font-size:12.5px; letter-spacing:.04em}
.studiobar a{color:var(--ink-3); text-decoration:none}
.studiobar a:hover{color:var(--gild)}

/* One row per filter group, stacked. 9px rather than the old 18 because four
   labelled rows should read as a single control block, not four separate bars;
   the last row restores the gap before the grid. */
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 9px}
.filters.last{margin-bottom:18px}
.filters input[type=search]{
  background:var(--panel); border:1px solid var(--rule); color:var(--ink);
  border-radius:3px; padding:7px 11px; font:inherit; font-size:14px; min-width:190px;
}
.chip{
  background:var(--panel); border:1px solid var(--rule); color:var(--ink-2);
  border-radius:3px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--gild); border-color:var(--gild); color:var(--ground); font-weight:600}
.count{color:var(--ink-3); font-size:13px; margin-left:auto; font-variant-numeric:tabular-nums}

/* card grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:12px}
.tile{
  background:var(--panel); border:1px solid var(--rule); border-radius:4px;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  border-top:3px solid var(--rule); cursor:default;
}
/* Quarter tiles double as the encounter filter on the Quarters page, so they
   need an affordance and a selected state the card grid's tiles never did.
   Unbuilt Quarters stay visible (they answer "what else is coming") but read
   as inert rather than clickable. */
.tile.pick{cursor:pointer; transition:border-color .12s, box-shadow .12s}
.tile.pick:hover{border-color:var(--gild)}
.tile.pick:focus-visible{outline:2px solid var(--gild); outline-offset:2px}
.tile.pick[aria-pressed="true"]{border-color:var(--gild); box-shadow:0 0 0 1px var(--gild), var(--shadow)}
.tile.pick.locked{cursor:default; opacity:.58}
.tile.pick.locked:hover{border-color:var(--rule)}
.tile.s-Hearts{border-top-color:var(--hearts)}
.tile.s-Diamonds{border-top-color:var(--diamonds)}
.tile.s-Clubs{border-top-color:var(--clubs)}
.tile.s-Spades{border-top-color:var(--spades)}
.tile .art{width:100%; aspect-ratio:13/10; background:var(--panel-2); object-fit:cover; display:block}
.tile .body{padding:10px 11px 12px}
.tile .nm{font-family:Georgia,serif; font-size:15px; line-height:1.25; margin-bottom:3px}
.tile .meta{font-size:11.5px; color:var(--ink-3); display:flex; gap:7px; flex-wrap:wrap;
            font-variant-numeric:tabular-nums}
.tile .pw{font-size:12px; color:var(--ink-2); margin-top:7px; line-height:1.4}
.pip{display:inline-block; padding:1px 6px; border-radius:2px; background:var(--panel-2);
     border:1px solid var(--rule); font-size:10.5px; letter-spacing:.04em}

/* tables (encounters) */
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{text-align:left; padding:10px; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--panel)}
.scroll{overflow-x:auto}

/* encounter rows -- the portrait is the hover target, so it gets the card
   treatment (framed, suit-tinted) rather than the dotted-underline one a
   text reference gets. */
table.enc td.portrait{width:70px; padding:8px 0 8px 10px}
table.enc td.portrait img{width:58px; height:58px; display:block; border-radius:3px;
  border:1px solid var(--rule); background:var(--panel-2); object-fit:cover}
table.enc td.portrait .noart{display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:3px; border:1px dashed var(--rule);
  background:var(--panel-2); color:var(--ink-3); font-size:20px}
table.enc td.portrait:hover img{border-color:var(--gild)}
table.enc td .meta{margin-top:3px}

/* the shared hover card */
.cardref{border-bottom:1px dotted var(--gild-dim); cursor:help}
td.portrait.cardref{border-bottom:1px solid var(--rule)}  /* keep the row rule */
#cm-pop{
  position:absolute; z-index:99; width:250px; pointer-events:none; opacity:0;
  transition:opacity .1s ease; background:var(--panel); border:1px solid var(--gild-dim);
  border-radius:4px; box-shadow:var(--shadow); overflow:hidden;
}
#cm-pop.on{opacity:1}
#cm-pop img{width:100%; aspect-ratio:13/10; object-fit:cover; display:block; background:var(--panel-2)}
#cm-pop .p{padding:10px 12px 12px}
#cm-pop .p h4{font-family:Georgia,serif; font-size:15px; margin:0 0 4px; font-weight:600}
#cm-pop .p .meta{font-size:11.5px; color:var(--ink-3); margin-bottom:6px}
#cm-pop .p .pw{font-size:12.5px; color:var(--ink-2); line-height:1.45}
/* changelog entries -- shared by the wiki's release notes and the results
   site's development log, which are the same shape with different audiences */
.entry{border-top:1px solid var(--rule); padding-top:20px; margin-top:26px}
.entry:first-child{border-top:0; margin-top:8px; padding-top:0}
.entryhead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.entrytitle{font-family:Georgia,serif; font-size:23px; font-weight:600; color:var(--ink);
  margin:0; letter-spacing:0; text-transform:none}
.entrydate{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--gild)}
.entryreports{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.entryreports a.pip{color:var(--gild); border-color:var(--gild-dim)}
.entryreports a.pip:hover{background:var(--gild); color:var(--ground); text-decoration:none}
.entrybody{max-width:76ch; color:var(--ink-2); margin-top:10px}
.entrybody h3{font-family:Georgia,serif; font-size:16px; color:var(--ink);
  margin:22px 0 7px; font-weight:600}
.entrybody h4{font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:18px 0 6px}
.entrybody p{margin:0 0 11px}
.entrybody ul{margin:0 0 12px; padding-left:20px}
.entrybody li{margin-bottom:6px}
.entrybody strong{color:var(--ink)}
.entrybody code{font-family:Consolas,"SF Mono",monospace; font-size:12.5px;
  background:var(--panel-2); border:1px solid var(--rule); border-radius:2px; padding:1px 4px}

footer{margin-top:56px; padding-top:16px; border-top:1px solid var(--rule); color:var(--ink-3); font-size:12.5px}

/* Rank filter row. Its own band because 13 chips inline with the suit/type
   chips wraps into an unreadable block, and rank is the axis you scan
   ACROSS suits ("show me every King") rather than alongside them. */
.rankbar{gap:5px}
.rankbar .chip{min-width:34px; text-align:center; padding:5px 8px;
               font-variant-numeric:tabular-nums}
/* Fixed width so the four labels form a left column and every group's chips
   start at the same x -- without it the rows read as ragged, unrelated bars. */
.grouplabel{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
            color:var(--ink-3); margin-right:4px;
            min-width:76px; display:inline-block}
@media (max-width:560px){ .grouplabel{min-width:0; width:100%; margin-bottom:2px} }
/* Quarters: four across on the Overview, one per suit. Art needs no override
   here -- the exporter writes every token at the shared 13:10 tile aspect
   already (cropping the three landscape ones, letterboxing the tall Tower),
   so object-fit:cover has nothing left to trim. */
.grid.quarters{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){ .grid.quarters{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .grid.quarters{grid-template-columns:1fr} }

/* Monarchs: four across, so the eight land as all four Queens on one row and
   all four Kings on the second (renderMonarchs sorts rank-first to match).
   The shared auto-fill grid gave a ragged 5-then-3. */
.grid.monarchs{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){ .grid.monarchs{grid-template-columns:repeat(2,1fr)} }
/* MUST match wiki_exporter.gd's MONARCH_ART_RATIO (4:5). The shared tile art
   box is 13/10 with object-fit:cover, so any mismatch here is trimmed off the
   image -- and since these are top-anchored portraits, what gets trimmed is
   foreheads. Matching the aspects exactly leaves `cover` nothing to crop. */
.grid.monarchs .tile .art{aspect-ratio:4/5}
@media (max-width:400px){ .grid.monarchs{grid-template-columns:1fr} }

/* Undrawn Monarch portrait -- a big suit glyph rather than an empty frame,
   so a missing file reads as "not drawn yet" and not as broken art. */
.tile .art.placeholder{display:flex; align-items:center; justify-content:center;
  font-size:56px; color:var(--ink-3); opacity:.5}

/* Section heading inside a card grid -- the Corrupted page groups by suit. */
.grouphead{font-size:12px; letter-spacing:.14em; text-transform:uppercase;
           color:var(--gild); margin:22px 0 10px; font-weight:600}