/* tools.css - items/cards, handouts, treasure maps, dungeon (screen + print). */

/* ---------------------------------------------------------------- shared bits */
.mres.row { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; cursor: default; }
.mres .btns { display: flex; gap: 6px; flex-shrink: 0; }
.btn.small { padding: 3px 9px; font-size: 13.5px; }
.lootlist { margin: 6px 0 10px; padding-left: 18px; }
.lootlist li { margin: 3px 0; }
.lootlist .btn { margin-left: 4px; }

/* ---------------------------------------------------------------- game cards */
.gcard { --c: #6b5f4a; font-family: "Alegreya Sans", sans-serif; color: #1b1712; background: #fbf7ee; border-radius: 3.5mm; overflow: hidden; position: relative; box-sizing: border-box; }
.gcard.small { width: 63mm; height: 88mm; font-size: 7.4pt; line-height: 1.25; }
.gcard.small.d2 { font-size: 6.6pt; } .gcard.small.d3 { font-size: 5.9pt; line-height: 1.18; }
.gcard.large { width: 95mm; height: 138mm; font-size: 8.6pt; line-height: 1.3; }
.gcard.large.d2 { font-size: 7.6pt; } .gcard.large.d3 { font-size: 6.6pt; line-height: 1.2; }
.gcard.r-common { --c: #5b5b5b; } .gcard.r-uncommon { --c: #2e7d4f; } .gcard.r-rare { --c: #2f5fa8; }
.gcard.r-veryrare { --c: #7a3fa0; } .gcard.r-legendary { --c: #b5651d; } .gcard.r-artifact { --c: #8c1c13; }
.gcard.unid { --c: #4a4236; }
.gc-in { position: absolute; inset: 2mm; border: 0.6mm solid var(--c); border-radius: 2.5mm; display: flex; flex-direction: column; overflow: hidden; }
.gc-head { background: var(--c); color: #fff; padding: 1.4mm 2.2mm 1.2mm; }
.gc-title { font-family: "Cinzel", "Alegreya", serif; font-weight: 700; font-size: 1.32em; line-height: 1.1; }
.gc-sub { font-style: italic; font-size: .92em; opacity: .92; }
.gc-body { padding: 1.6mm 2.2mm; flex: 1; overflow: hidden; }
.gc-body p { margin: 0 0 1.2mm; }
.gc-body ul { margin: 0 0 1.2mm 3.5mm; padding: 0; }
.gc-body .etable { font-size: .92em; margin: 0 0 1.2mm; }
.gc-body .etable th, .gc-body .etable td { padding: .2mm 1mm; }
.cmeta { border-bottom: .3mm solid #d9ccb0; margin-bottom: 1.2mm; padding-bottom: .8mm; }
.clook { font-style: italic; }
.cnote { font-size: .9em; color: #4a4236; border-top: .3mm dashed #cdbd9c; padding-top: .8mm; }
.cmuted { color: #6b5f4a; }
.cnotebody { font-family: "IM Fell English", serif; font-size: 1.2em; }
.gcard.unid .gc-body { display: flex; flex-direction: column; justify-content: center; text-align: center; font-family: "IM Fell English", serif; font-size: 1.25em; }
.gc-foot { display: flex; justify-content: space-between; padding: .8mm 2.2mm; border-top: .3mm solid #d9ccb0; font-size: .9em; color: #4a4236; }
.cardlist { display: flex; flex-direction: column; gap: 14px; }
.carditem { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--soft); padding-bottom: 12px; }
.cardprev .gcard { box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cardside { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.cardctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cardctl select { width: auto; min-height: 30px; padding: 2px 6px; }

/* card sheets in print */
@page cards { size: A4; margin: 8mm; }
.cardsheet { page: cards; display: grid; justify-content: center; align-content: start; break-after: page; }
.cardsheet.small { grid-template-columns: repeat(3, 63mm); grid-auto-rows: 88mm; gap: 0; }
.cardsheet.large { grid-template-columns: repeat(2, 95mm); grid-auto-rows: 138mm; gap: 1mm; }
.cardsheet .gcard { outline: .2mm dashed #bbb; border-radius: 0; }
.cardsheet .gcard .gc-in { border-radius: 2.5mm; }

/* ---------------------------------------------------------------- handouts */
.handout { position: relative; box-sizing: border-box; color: #2b2217; overflow: hidden; margin: 0 auto; }
.handout.A4 { width: 190mm; min-height: 270mm; } .handout.A5 { width: 138mm; min-height: 196mm; } .handout.A6 { width: 92mm; min-height: 128mm; }
.handout .hbg { position: absolute; inset: 0; z-index: 0; }
.handout .hcontent { position: relative; z-index: 1; padding: 14mm 13mm; }
.handout.A6 .hcontent { padding: 9mm 8mm; } .handout.A5 .hcontent { padding: 12mm 11mm; }
.handout h1 { font-weight: normal; text-align: center; margin: 0 0 4mm; line-height: 1.05; }
.handout .hsub { text-align: center; margin: -2mm 0 4mm; font-style: italic; }
.handout .hbody { white-space: pre-wrap; }
.handout .hsign { text-align: right; margin-top: 6mm; }
.handout .hseal { position: absolute; z-index: 2; }
.handout .himg { display: block; margin: 0 auto 4mm; max-width: 70%; max-height: 90mm; filter: sepia(.6) contrast(1.05); border: 1.2mm solid rgba(60,40,20,.65); }
.handout .hreward { text-align: center; font-size: 1.6em; margin-top: 4mm; }
.handout.f-fell { font-family: "IM Fell English", serif; font-size: 13pt; } .handout.f-fell h1 { font-family: "IM Fell English SC", serif; }
.handout.f-hand { font-family: "Caveat", cursive; font-size: 17pt; line-height: 1.3; } .handout.f-hand h1 { font-family: "Caveat", cursive; font-weight: 700; }
.handout.f-scrawl { font-family: "Homemade Apple", cursive; font-size: 11.5pt; line-height: 1.9; } .handout.f-scrawl h1 { font-family: "Homemade Apple", cursive; }
.handout.f-gothic { font-family: "IM Fell English", serif; font-size: 13pt; } .handout.f-gothic h1 { font-family: "Pirata One", serif; }
.handout.f-uncial { font-family: "Uncial Antiqua", serif; font-size: 12pt; line-height: 1.5; } .handout.f-uncial h1 { font-family: "Uncial Antiqua", serif; }
.handout.f-royal { font-family: "Alegreya", serif; font-size: 12.5pt; } .handout.f-royal h1 { font-family: "Cinzel", serif; letter-spacing: .06em; }
.handout.f-medieval { font-family: "MedievalSharp", serif; font-size: 12.5pt; } .handout.f-medieval h1 { font-family: "MedievalSharp", serif; }
.handout.A4 h1 { font-size: 34pt; } .handout.A5 h1 { font-size: 26pt; } .handout.A6 h1 { font-size: 19pt; }
.handout.A6.f-fell, .handout.A6.f-gothic, .handout.A6.f-royal, .handout.A6.f-medieval, .handout.A6.f-uncial { font-size: 10.5pt; }
.handout.A6.f-hand { font-size: 13pt; } .handout.A6.f-scrawl { font-size: 9pt; }
.handout.t-poster h1 { font-size: 46pt; letter-spacing: .04em; } .handout.t-poster.A5 h1 { font-size: 34pt; } .handout.t-poster.A6 h1 { font-size: 24pt; }
.handout.t-poster .hbody { text-align: center; }
.handout.t-notice .hbody, .handout.t-proclamation .hbody { text-align: justify; }
.handout.t-proclamation h1 { text-transform: uppercase; }
.handout .runes { font-family: "Noto Sans Runic", sans-serif; letter-spacing: .12em; font-size: 1.45em; }
.handout .ogham { font-family: "Noto Sans Ogham", sans-serif; font-size: 1.6em; letter-spacing: .05em; }
.handout .pigpen svg { vertical-align: middle; }
.handout.paper-dark { color: #efe2c4; } .handout.paper-clean { color: #222; }
.handout .hkey { display: grid; grid-template-columns: repeat(auto-fill, minmax(17mm, 1fr)); gap: 2mm 3mm; margin-top: 4mm; text-align: center; }
.handout .hkey div { border-bottom: .3mm solid rgba(60,40,20,.4); padding-bottom: 1mm; }
.handout .hkey b { display: block; font-family: "Alegreya Sans", sans-serif; font-size: 10pt; }
.hpage { break-after: page; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 5mm; }
@page handouts { size: A4; margin: 10mm; }
.hpage { page: handouts; }
.hcut { outline: .2mm dashed #aaa; outline-offset: 1mm; }
.dmsheet { font-family: "Alegreya Sans", sans-serif; font-size: 10.5pt; color: #111; border: .4mm solid #8c1c13; border-radius: 2mm; padding: 5mm 6mm; width: 180mm; }
.dmsheet h2 { font-family: "Alegreya", serif; color: #8c1c13; margin: 0 0 2mm; font-size: 15pt; }
.dmsheet ol { margin: 1mm 0 0 5mm; padding: 0; }
.hprev { transform-origin: top left; }
.hprevwrap { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #d9d4c8; padding: 10px; }
.riddlelist li { margin: 4px 0; }

/* ---------------------------------------------------------------- treasure map */
.tmap svg { display: block; width: 100%; height: auto; }
.tmap-clues { font-family: "IM Fell English", serif; font-size: 12pt; }
@page maps { size: A4 landscape; margin: 8mm; }
.mappage { page: maps; break-after: page; display: flex; justify-content: center; align-items: center; height: 190mm; }
.mappage svg { width: 277mm; height: 190mm; }
.mappage.piece svg { width: auto; height: 190mm; max-width: 277mm; }

/* ---------------------------------------------------------------- dungeon */
.dmap { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: auto; }
.dmap svg { display: block; width: 100%; height: auto; }
.roomkey { margin: 0; padding: 0; list-style: none; }
.roomkey > li { border-bottom: 1px solid var(--soft); padding: 8px 0; }
.roomkey .rk-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.roomkey .rk-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--rule); color: #fff; font-weight: 700; font-size: 14px; }
.roomkey .rk-name { font-weight: 700; font-family: var(--serif); font-size: 17px; }
.roomkey .rk-size { color: var(--muted); font-size: 13px; }
.roomkey .rk-read { font-style: italic; background: #f6f1e4; border-left: 3px solid #c9b48a; padding: 4px 8px; margin: 4px 0; }
.roomkey .rk-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 10px; padding: 1px 7px; }
.rk-tag.monster { background: #f6e3e1; color: #8c1c13; } .rk-tag.trap { background: #fbf0dc; color: #9a5b00; } .rk-tag.treasure { background: #e7f2ea; color: #2e7d4f; } .rk-tag.empty { background: var(--soft); color: var(--muted); }
@page dungeon { size: A4; margin: 10mm; }
.dpage { page: dungeon; break-after: page; }
.dpage svg { width: 100%; height: auto; max-height: 265mm; }
.dkey { font-family: "Alegreya Sans", sans-serif; font-size: 9.5pt; columns: 2; column-gap: 7mm; }
.dkey > div { break-inside: avoid; margin-bottom: 3mm; }
.dkey h3 { font-family: "Alegreya", serif; font-size: 11.5pt; color: #8c1c13; margin: 0 0 1mm; }
.dkey .rk-read { font-style: italic; border-left: .8mm solid #c9b48a; padding-left: 2mm; margin: 1mm 0; }
@page tiles { size: A4; margin: 6mm; }
.tilepage { page: tiles; break-after: page; position: relative; }
.tilepage .tlabel { position: absolute; right: 0; top: -4.5mm; font: 7pt "Alegreya Sans", sans-serif; color: #777; }
.dmbox { background: #fbf0dc; border-left: 3px solid #c58a00; padding: 6px 10px; border-radius: 4px; margin: 6px 0 10px; font-size: 14.5px; }
.dmbox ol { margin: 4px 0 0 18px; padding: 0; }
.dlegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted, #555); margin-top: 8px; font-family: "Alegreya Sans", sans-serif; }
.dlegend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { display: inline-block; width: 14px; height: 6px; border: 1.3px solid #2b2217; background: #fff; }
.lg-locked { background: radial-gradient(circle, #2b2217 30%, #fff 35%); }
.lg-secret { border: 0; width: auto; height: auto; background: none; } .lg-secret::before { content: "S"; font-weight: 700; color: #8c1c13; }
.lg-bars { border: 0; border-top: 2.4px dotted #2b2217; height: 0; background: none; }
.lg-stairs { height: 12px; width: 12px; background: repeating-linear-gradient(#fff 0 2px, #2b2217 2px 3px); }
.pv-dtitle { font-family: "Alegreya", serif; color: #8c1c13; font-size: 20pt; margin: 0 0 3mm; }
.tileindex { display: flex; flex-wrap: wrap; gap: 2mm; font-family: "Alegreya Sans", sans-serif; }
.tileindex span { border: .3mm solid #999; padding: 1mm 2.5mm; }
.tilepage svg { display: block; }

/* ---------------------------------------------------------------- locations */
.loclist { list-style: none; margin: 0 0 10px; padding: 0; }
.loclist li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; }
.loclist li.on { background: #f6efe0; }
.loclist li.sub { padding-left: 22px; }
.loclist li .link { flex: 1; text-align: left; font-weight: 600; }
.kindbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.btn.on { background: var(--rule); color: #fff; border-color: var(--rule); }
.newloc { border: 1px dashed var(--line); border-radius: 8px; padding: 10px; }
.floortabs { display: flex; gap: 6px; margin: 6px 0; }
.dmap.wide { overflow: auto; }
.roomkey > li.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: #fff1c2; } to { background: transparent; } }
.rk-notes { color: #5a4a2a; font-size: 13px; margin-top: 3px; }
.rk-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rk-links span { background: #eef2f8; color: #2f4b7c; border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.linkbox { margin-top: 6px; border: 1px solid var(--soft); border-radius: 6px; padding: 4px 8px; }
.linkbox summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.linkrow { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 4px 0; }
.warnline { background: #fbf0dc; color: #7a4a00; border-radius: 6px; padding: 4px 8px; margin: 4px 0; font-size: 13px; }
.placeloc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.placeloc select { width: auto; max-width: 220px; }
select.small { width: auto; max-width: 240px; font-size: 13px; padding: 2px 4px; }
.dkey h2 { font-family: "Cinzel", serif; font-size: 13pt; margin: 3mm 0 1mm; border-bottom: .3mm solid #999; }
.dkey .rk-links span { background: none; padding: 0 2mm 0 0; color: #333; }
.tokensheet .tokgrid { display: flex; flex-wrap: wrap; gap: 3mm; }
.tok { text-align: center; }
.tok svg { display: block; margin: 0 auto; }
.tokname { font: 6pt "Alegreya Sans", sans-serif; max-width: 26mm; margin: .5mm auto 0; line-height: 1.1; }
@page landmap { size: A4 landscape; margin: 8mm; }
.dpage.land { page: landmap; }
.dpage.land svg { max-height: 180mm; }
.newdet summary { cursor: pointer; margin: 8px 0; font-family: var(--serif); font-size: 17px; }

.dmap.marking { cursor: crosshair; outline: 3px dashed #c9a227; outline-offset: 2px; }
.kindbtns { grid-template-columns: 1fr 1fr; }