/* sheet.css — the printable sheet. Copied from the linkedin-games-print skill's
   render.py CSS so screen preview, browser print and the skill's PDF all agree.
   Everything here is in mm: the sheet is a physical object, not a responsive layout. */
/* ONE sheet size for every printer, no picker and no "print at 100%" instructions.

   A4 is 210 x 297mm, US Letter is 215.9 x 279.4mm — neither fits inside the other. So the
   sheet is the INTERSECTION: A4's width by Letter's height. 210 x 279.4mm fits both
   papers with room to spare, which means it prints correctly at the browser's default
   settings, at "fit to page", and at a literal 100% — there is no combination that clips
   it and no second page. Designing for one paper and relying on shrink-to-fit would work
   for most people, but breaks for anyone whose scaling is set to 100%.

   margin:0 lets the sheet use the full page; its own 10mm padding keeps content clear of
   the printer's unprintable edge. If a browser insists on default margins instead, the
   whole block just scales down a little and still lands on one page. */
@page { margin: 0; }

.sheet { width:210mm; height:279.4mm; padding:10mm; display:flex; flex-direction:column;
         background:#fff; color:#111; box-sizing:border-box;
         font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
.sheet * { box-sizing:border-box; }
.sheet header { display:flex; justify-content:space-between; align-items:baseline;
         border-bottom:0.4mm solid #111; padding-bottom:1.6mm; margin-bottom:3.5mm; }
.sheet header h1 { font-size:4.4mm; margin:0; letter-spacing:.02em; }
.sheet header .date { font-size:3.1mm; color:#555; }
.sheet .cards { flex:1; display:grid; grid-template-columns:1fr 1fr;
         grid-template-rows:repeat(3,1fr); gap:4mm 5mm; }
.sheet .card { display:flex; flex-direction:column; align-items:center; }
.sheet .card h2 { font-size:3.7mm; margin:0 0 0.5mm; font-weight:700; }
.sheet .card .no { font-weight:400; color:#666; }
.sheet .card .rule { font-size:2.5mm; color:#555; margin:0 0 1.6mm; text-align:center; }
.sheet .hint { font-size:2.2mm; color:#666; margin-top:1mm; }
.sheet table.grid { border-collapse:collapse; table-layout:fixed; }
.sheet table.grid td { border:0.22mm solid #9a9a9a; text-align:center; vertical-align:middle;
                padding:0; position:relative; }
.sheet td.num { font-size:3.4mm; font-weight:700; }
.sheet td.letter { font-size:4.6mm; font-weight:700; }
.sheet td.blocked { background:#dcdcdc; }
.sheet .dot { display:inline-flex; align-items:center; justify-content:center;
       width:5.6mm; height:5.6mm; border-radius:50%; border:0.4mm solid #111; font-size:3.2mm; }
.sheet .in { position:relative; width:100%; height:100%; display:flex; align-items:center;
      justify-content:center; }
.sheet svg.ico { width:62%; height:62%; }
.sheet .con { position:absolute; font-size:2.9mm; font-weight:700; background:#fff; line-height:1;
       padding:0.15mm 0.3mm; }
.sheet .con.r { right:-1.5mm; top:50%; transform:translateY(-50%); }
.sheet .con.b { bottom:-1.5mm; left:50%; transform:translateX(-50%); }
.sheet .seed { display:flex; align-items:center; justify-content:center; border:0.5mm solid #111;
        border-radius:1.2mm; font-size:3.6mm; font-weight:700; }
.sheet .any { position:relative; width:84%; height:84%; display:flex; align-items:center;
       justify-content:center; }
.sheet .any i { position:absolute; border:0.4mm dashed #111; border-radius:1.2mm; }
.sheet .any i.w { left:0; right:0; top:21%; bottom:21%; }
.sheet .any i.t { top:0; bottom:0; left:21%; right:21%; }
.sheet .any b { position:relative; font-size:3.6mm; font-weight:700; background:#fff;
         padding:0 0.35mm; line-height:1; }
.sheet svg.qsvg { display:block; }
.sheet .legend { margin-top:2.2mm; display:flex; flex-direction:column; gap:0.8mm;
         align-items:flex-start; }
.sheet .lrow { display:flex; gap:0.8mm; }
.sheet .lrow i { width:2.6mm; height:2.6mm; border:0.22mm solid #777; display:block; }