/* Frame for a single generated monster page (monsters/<slug>/). The sheet
   inside it is styled by monster.css, which the bestiary modal shares. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-app); color: var(--text-body); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1120px, 92vw); margin: 0 auto; }

.monster-head { padding: clamp(30px, 5vw, 54px) 0 26px; border-bottom: 1px solid var(--stone-800); background: radial-gradient(60% 50% at 20% 0%, rgba(211,0,0,0.14), transparent 70%); }
.back-link { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.back-link:hover { color: var(--brass-300); }
.monster-head h1 { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(34px, 5vw, 58px); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-strong); }
.monster-ident { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.05em; color: var(--text-faint); text-transform: uppercase; }

.monster-main { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: 24px; padding: 30px 0 70px; align-items: start; }
.monster-art img { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); background: var(--surface-panel); }
.monster-art .portrait { display: block; width: 100%; }
.monster-tokens { display: flex; gap: 12px; margin-top: 12px; }
.monster-tokens .token { width: calc(50% - 6px); }
.art-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.art-downloads a { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 5px 9px; color: var(--text-body); }
.art-downloads a:hover { border-color: var(--brass-400); color: var(--brass-300); }
.monster-sheet { min-width: 0; }

.monster-credit { grid-column: 1 / -1; margin: 4px 0 0; border-top: 1px solid var(--border-hairline); padding-top: 14px; font-size: 13px; color: var(--text-faint); line-height: 1.6; }
.monster-credit a { border-bottom: 1px solid var(--border-strong); }
.monster-credit a:hover { color: var(--brass-300); border-color: var(--brass-400); }

.monster-siblings { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; margin-top: 4px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.monster-siblings a:hover { color: var(--brass-300); }

footer { padding: 34px 0; border-top: 1px solid var(--stone-800); color: var(--text-faint); font-size: 13px; }
footer a { border-bottom: 1px solid var(--border-strong); }
footer a:hover { color: var(--brass-300); }

@media (max-width: 860px) {
  .monster-main { grid-template-columns: 1fr; }
}

/* A GM printing a monster wants the block, not the site around it. */
@media print {
  .site-nav, .legal-notice, footer, .art-downloads, .monster-siblings, .back-link { display: none !important; }
  .monster-head { padding: 0 0 8px; border: 0; background: none; }
  .monster-main { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .monster-art .portrait { max-width: 46mm; }
  .monster-tokens { gap: 8px; }
  .monster-tokens .token { max-width: 28mm; }
  h1, h3 { break-after: avoid; }
}