/* ==========================================================================
   Land of Eem — A4 character sheet (the `sheet` block)
   Shared by gm.php (GM list), sheet.php (one character) and the share page
   index.html?c=<id>. Every rule is scoped under `.sheet` on purpose: the
   wizard styles its own card with the same class names (.portrait, .panel,
   .ribbon, .story), so unscoped sheet rules would restyle the kid's card.

   One character = exactly one A4 page. @page carries margin 0 on purpose: the
   sheet element provides the printable safe area (--safe padding), so the
   decorative frame fills the whole page without touching a printer's
   non-printable edge. Colour is never the only signal.
   Layout: header → stat strip → two balanced columns → Mut track → notes;
   the notes box takes `flex:1` and absorbs the leftover height.
   ========================================================================== */
:root{
  --ink:#312b3b; --paper:#fffdf7; --cream:#fff8e9; --gold:#f6cf79;
  --coral:#e97962; --mint:#b9d8c2; --purple:#6b587c;
  --line:#d9c9a3; --muted:#5c5468;
  --sheet-w:210mm; --sheet-h:296mm; --safe:9mm;
  --font:ui-rounded,"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}

.sheet{
  width:min(var(--sheet-w),100%); height:var(--sheet-h); padding:var(--safe);
  background:#fff; color:var(--ink); font-family:var(--font); line-height:1.4;
  box-shadow:0 12px 28px rgba(49,43,59,.22);
  break-after:page; break-inside:avoid;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.sheet:last-of-type{break-after:auto}
.sheet *{box-sizing:border-box}
.sheet .frame{
  height:100%; display:flex; flex-direction:column; gap:2.4mm;
  border:2.5pt solid var(--ink); border-radius:2mm; padding:4mm;
  box-shadow:inset 0 0 0 .7mm var(--gold);
  background:linear-gradient(#fff,#fff) padding-box;
}

/* head */
.sheet .sheet-head{display:flex;gap:5mm;align-items:center;border-bottom:1.6pt solid var(--ink);padding-bottom:3mm}
.sheet .portrait{width:28mm;height:28mm;flex:none;object-fit:cover;background:var(--gold);
  border:2pt solid var(--ink);border-radius:3mm}
.sheet .portrait-empty{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 2.5mm,#fbe6b4 2.5mm,#fbe6b4 5mm)}
.sheet .ident{flex:1;min-width:0}
.sheet .ribbon{font-size:7.2pt;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--purple)}
.sheet .char-name{font-size:23pt;font-weight:900;line-height:1.05;margin:.2mm 0 1.2mm;overflow-wrap:anywhere}
.sheet .pill{display:inline-block;background:var(--mint);border:1pt solid var(--ink);border-radius:999px;
  padding:.35mm 2.6mm;font-size:8.6pt;font-weight:800}
.sheet .lineage{font-size:11pt;margin:.9mm 0 0}
.sheet .lineage .sep{color:#9a8f7c;padding:0 .6mm}
.sheet .good-at{font-size:8pt;color:var(--muted);margin:.7mm 0 0}

/* stat strip */
.sheet .stats{display:grid;grid-template-columns:repeat(6,1fr);gap:1.8mm;list-style:none;margin:0;padding:0}
.sheet .stats li{border:1.2pt solid var(--ink);border-radius:2mm;background:var(--cream);
  padding:1.1mm .8mm;text-align:center}
.sheet .stats .lab{display:block;font-size:6.8pt;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--purple)}
.sheet .stats .val{display:block;font-size:13.5pt;font-weight:900;line-height:1.12}
.sheet .stats .sub{display:block;font-size:6pt;line-height:1.15;color:var(--muted)}
.sheet .legend{font-size:6.8pt;color:var(--muted);margin:0}

/* body columns */
.sheet .cols{display:grid;grid-template-columns:1fr 1fr;gap:4mm;align-items:start}
.sheet .col{display:flex;flex-direction:column;gap:2.6mm;min-width:0}
.sheet .panel{border:1.2pt solid var(--line);border-radius:2.5mm;background:var(--paper);padding:2.4mm 2.8mm}
.sheet h2.sec{font-size:8.4pt;text-transform:uppercase;letter-spacing:.1em;color:var(--purple);
  margin:0 0 1.4mm;padding-bottom:.8mm;border-bottom:1pt solid var(--line);font-weight:800}

.sheet .attr{display:flex;gap:2.4mm;padding:1.05mm 0;border-bottom:1pt dashed var(--line)}
.sheet .attr:last-child{border-bottom:0;padding-bottom:0}
.sheet .attr .mod{flex:none;width:8.4mm;height:8.4mm;border-radius:50%;background:var(--gold);
  border:1.2pt solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:10pt}
.sheet .attr-body{min-width:0}
.sheet .attr h3{margin:0;font-size:10.5pt;line-height:1.15}
.sheet .attr .attr-de{display:block;font-size:7pt;font-weight:400;color:var(--muted)}
.sheet .attr .skills{font-size:8pt;margin:.5mm 0 0;color:#3b3546}
.sheet .attr .skills b{font-weight:900}

.sheet .gear{list-style:none;margin:0;padding:0}
.sheet .gear li{display:flex;justify-content:space-between;gap:2mm;font-size:7.9pt;
  padding:.35mm 0;border-bottom:1pt dashed var(--line)}
.sheet .gear li:last-child{border-bottom:0}
.sheet .gear .slots{color:var(--muted);font-size:7.4pt;white-space:nowrap}
.sheet .slotbar{height:2.2mm;border:1pt solid var(--ink);border-radius:999px;background:#fff;overflow:hidden;margin:1.2mm 0 .6mm}
.sheet .slotbar span{display:block;height:100%;background:var(--coral)}
.sheet .perks{list-style:none;margin:0;padding:0;font-size:8pt}
.sheet .perks li{padding:.65mm 0;border-bottom:1pt dashed var(--line)}
.sheet .perks li:last-child{border-bottom:0}
.sheet .small{font-size:7.4pt;color:var(--muted);margin:.4mm 0 0}
/* Klassen-Fähigkeiten in Kurzform (Frank 2026-10-16, Variante A): eine Zeile je
   Fähigkeit, Regelfakt statt Volltext — der Volltext steht auf der Ausschneide-
   Karte (abilities.php). Die Glossen der entfallenen Legende sitzen jetzt in den
   Werte-Kacheln, das gibt dem Band die Höhe. */
.sheet .abilities-band{border:1.2pt solid var(--mint);border-radius:2.5mm;background:#f1f7f2;padding:1.4mm 2.8mm}
.sheet .abilities-band h2.sec{margin-bottom:.7mm;padding-bottom:.4mm}
.sheet .abil{list-style:none;margin:0;padding:0;font-size:7.4pt}
.sheet .abil li{padding:.4mm 0 .4mm 2.6mm;border-bottom:1pt dashed var(--line);text-indent:-2.6mm}
.sheet .abil li:last-child{border-bottom:0}
.sheet .abil strong{color:var(--purple)}
.sheet .abil .en{font-size:6.2pt;color:var(--muted)}

/* Zauberer-Blatt (runes.php): Runen-Regeln, die eigene Auswahl und die
   Start-Liste. Nutzt bewusst dieselben .sheet/.panel-Bausteine wie der Bogen. */
.sheet .rune-rules{margin:0;padding-left:5mm;font-size:8.4pt;line-height:1.45}
.sheet .rune-rules li{padding:.5mm 0}
.sheet .rune-mine{list-style:none;margin:1mm 0 0;padding:0}
.sheet .rune-mine .rune-slot{display:flex;align-items:center;gap:2mm;min-height:9mm;
  padding:.6mm 1.6mm;border:1pt dashed var(--line);border-radius:1.5mm;background:#fff}
.sheet .rune-mine .rune-de{font-size:12pt;font-weight:800;color:var(--purple)}
.sheet .rune-mine .rune-blank{display:block;width:100%;height:6mm;
  background-image:repeating-linear-gradient(to right,var(--line) 0,var(--line) 2mm,transparent 2mm,transparent 4mm);
  background-size:4mm 0.4mm;background-repeat:repeat-x;background-position:0 5.4mm}
.sheet .rune-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 5mm;list-style:none;margin:0;padding:0;font-size:8.6pt}
.sheet .rune-grid li{padding:.5mm 0;border-bottom:1pt dashed var(--line)}
.sheet .rune-grid .n{display:inline-block;width:5mm;color:var(--muted)}
.sheet .rune-en{font-size:6.6pt;color:var(--muted)}
.sheet .abil .blanks{color:var(--muted);letter-spacing:.05em}
.sheet .panel .small{margin-top:0}
.sheet .fld{font-size:7.9pt;margin:.4mm 0}
.sheet .fld .k{font-weight:800;color:var(--purple)}
.sheet .story{background:var(--cream)}

.sheet .sheet-foot{margin-top:auto;border-top:1.6pt solid var(--ink);padding-top:1.2mm;
  display:flex;justify-content:space-between;gap:4mm;font-size:6.8pt;color:var(--muted)}

/* Mut track + notes (fill the page bottom) */
.sheet .track{display:flex;align-items:center;gap:4mm;border:1.2pt solid var(--line);
  border-radius:2.5mm;background:var(--paper);padding:2mm 2.8mm}
.sheet .track-head{flex:0 0 46mm}
.sheet .track h2.sec{border-bottom:0;margin:0 0 .4mm}
.sheet .track .hint{font-size:6.6pt;color:var(--muted);margin:0;line-height:1.25}
.sheet .pips{display:flex;flex-wrap:wrap;gap:1.6mm;align-content:center}
.sheet .pips .pip{display:block;width:5mm;height:5mm;border:1.2pt solid var(--ink);
  border-radius:50%;background:#fff}
.sheet .notes{flex:1;min-height:12mm;display:flex;flex-direction:column;
  border:1.2pt dashed var(--line);border-radius:2.5mm;background:var(--paper);padding:2mm 2.8mm}
.sheet .notes h2.sec{border-bottom:0;margin:0 0 .8mm}
.sheet .notes .lines{flex:1;min-height:2mm;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 6.1mm,var(--line) 6.1mm,var(--line) 6.4mm)}

/* ---------------- print: the sheet IS the page ---------------- */
@page{size:A4 portrait;margin:0}
@media print{
  /* explicit page geometry (210x297mm page box, 1mm slack at the bottom) */
  .sheet{width:210mm;box-shadow:none;margin:0}
  /* "print this sheet only" (gm.php) */
  .sheet.skip-print{display:none!important}
}

/* SCREEN only — in print the viewport is the PAPER (A4 = 793.7 CSS px), but a
   page narrower than the breakpoint (standee.css prints 150 mm = 566.9 px) would
   otherwise pick up the phone layout, and the panel rules hide the artwork. */
@media screen and (max-width:620px){
  .sheet{width:100%;height:auto;padding:4mm}
  .sheet .frame{padding:3mm}
  .sheet .cols{grid-template-columns:1fr}
  .sheet .stats{grid-template-columns:repeat(3,1fr)}
  .sheet .track{flex-direction:column;align-items:flex-start}
  .sheet .track-head{flex:none}
}