/* The Letters of Marque player's manual on www.xn3tech.com. It sits on the product page's sheet (../lom.css: the colors,
   fonts, site header and footer) and adds the manual's own parts. Every color has a fallback, so the page still reads
   if that sheet changes. Light and dark follow the system. */

/* The title band: the oak and candlelight of the start painting, dark in both themes */
.mhero{background:var(--oak,#140e09);color:var(--oakText,#f1e4c9);border-bottom:1px solid var(--oakLine,#3b2c1e);
  background-image:radial-gradient(ellipse 60% 90% at 88% 30%,rgba(220,174,94,0.20),transparent 70%),radial-gradient(ellipse 50% 70% at 10% 100%,rgba(178,58,38,0.16),transparent 70%)}
.mhero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(36px,6vw,64px);padding-bottom:clamp(36px,6vw,64px)}
.mhero .eyebrow{color:#dcae5e}
.mhero .wordmark{color:var(--oakText,#f1e4c9)}
.mhero h1{margin:16px 0 0;font-size:clamp(26px,3vw,36px);font-weight:600;font-style:italic;color:var(--oakText,#f1e4c9)}
.mhero p.lead{margin:14px 0 0;max-width:620px;font-size:19px;color:var(--oakMuted,#cdb58c)}
.mhero .btn.ghost{border-color:var(--oakText,#f1e4c9);color:var(--oakText,#f1e4c9)}
.mhero .btn.ghost:hover{border-color:#dcae5e;color:#dcae5e}
.mhero .soon{color:#dcae5e}
.mhero figure{margin:0}
.mhero figure img{display:block;width:100%;border:1px solid #3b2c1e;border-radius:6px;box-shadow:0 14px 36px rgba(0,0,0,0.55)}
.mhero figcaption{margin-top:10px;font-size:14px;font-style:italic;color:var(--oakMuted,#cdb58c)}

/* Contents beside the text, and a folding list above it on narrow screens */
aside.toc .toc-name{display:block;margin:0 0 14px;font-family:var(--title,Georgia,serif);font-size:19px;font-weight:600;letter-spacing:0.02em;text-decoration:none;color:var(--ink,#231912)}
details.toc-mobile{display:none;margin:24px 0 0;border:1px solid var(--line,#d6c3a0);border-radius:8px;background:var(--surface,#fdf8ee);padding:10px 14px}
details.toc-mobile summary{font-weight:700;cursor:pointer;min-height:28px}
details.toc-mobile ol{margin:10px 0 4px;padding-left:24px}
details.toc-mobile li{margin:2px 0}

/* The text */
main{min-width:0}
main section{padding:8px 0 30px;border-bottom:1px solid var(--line,#d6c3a0);margin-bottom:30px}
main section:last-child{border-bottom:0}
main h2{margin:0 0 12px;font-size:clamp(32px,3.4vw,42px)}
main h3{margin:28px 0 8px;font-size:clamp(24px,2.4vw,28px)}
main h4{margin:20px 0 6px;font-family:var(--text,'Segoe UI',sans-serif);font-size:17px;font-weight:700;letter-spacing:0.02em}
main p,main li,main dd{max-width:760px}
main ul,main ol{padding-left:24px}
main li{margin:4px 0}
.ui{font-weight:700}
.note{max-width:760px;margin:16px 0;padding:12px 18px;border-radius:6px;background:var(--waxSoft,#f3ddd2);border-left:4px solid var(--wax,#9b2c1f)}
.note.sea{background:var(--seaSoft,#dbe6ea);border-left-color:var(--sea,#21485f)}
.note p{margin:0}
.note p+p{margin-top:8px}
main figure.shot{margin:18px 0 26px;max-width:880px}
main figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--line,#d6c3a0);border-radius:6px;box-shadow:var(--shadow,0 12px 32px rgba(50,30,10,0.18))}
main figure.shot figcaption{margin-top:10px;font-size:15px;color:var(--muted,#5d4a37)}
table{border-collapse:collapse;width:100%;max-width:820px;margin:12px 0;font-size:16px;background:var(--surface,#fdf8ee);border:1px solid var(--line,#d6c3a0)}
th,td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--line,#d6c3a0)}
th{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted,#5d4a37);background:var(--bg2,#e8dcc2)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;white-space:nowrap}
.table-scroll{overflow-x:auto;max-width:100%;margin:12px 0}
.table-scroll table{margin:0}
kbd{display:inline-block;min-width:1.6em;padding:0 7px;border:1px solid var(--rule,#a7864f);border-bottom-width:2px;border-radius:5px;background:var(--surface,#fdf8ee);font-family:var(--text,'Segoe UI',sans-serif);font-size:15px;font-weight:700;line-height:1.5;text-align:center;white-space:nowrap}
.langs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none;max-width:760px}
.langs li{margin:0;padding:3px 12px;border:1px solid var(--line,#d6c3a0);border-radius:999px;background:var(--surface,#fdf8ee);font-size:15px}
.cols{columns:2 260px;column-gap:28px;max-width:820px}
.cols li{break-inside:avoid}
dl.glossary{max-width:780px}
dl.glossary dt{margin-top:14px;font-weight:700}
dl.glossary dd{margin:2px 0 0;color:var(--muted,#5d4a37)}

@media (max-width:900px){
  .mhero .wrap{grid-template-columns:minmax(0,1fr)}
  details.toc-mobile{display:block}
}
@media (max-width:700px){
  /* wide tables keep readable columns and scroll sideways in their frame */
  .table-scroll table.wide{min-width:620px}
}
@media (max-width:520px){
  .mhero p.lead{font-size:18px}
  th,td{padding:7px 9px}
}
@media print{
  details.toc-mobile,.mhero .btns{display:none}
  .mhero{background:none;color:#000}
  .mhero h1,.mhero .wordmark,.mhero p.lead{color:#000}
  main section{border:0}
}