@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Noto+Sans:wght@400;700&display=swap');
@page { size: A4; margin: 10mm; }
:root { --blue:#2f6fd6; --red:#e2483d; --gold:#c98b2e; --ink:#2a2a35; --soft:#f6f1e7; --line:#d8cfbf; }
* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
html, body { margin:0; background:#ddd; color:var(--ink); font-family:'Noto Sans', 'Segoe UI', Arial, sans-serif; font-size:11.5pt; line-height:1.4; }
img.svg { vertical-align:middle; }
.sheet { width:210mm; margin:8mm auto; background:#fff; padding:10mm; box-shadow:0 2px 12px rgba(0,0,0,.2); }
h1, h2, h3, .title { font-family:'Comfortaa', 'Segoe UI', sans-serif; font-weight:700; margin:0 0 3mm; }
h1 { font-size:22pt; color:var(--blue); } h2 { font-size:14pt; color:var(--blue); margin-top:5mm; } h3 { font-size:12pt; }
p { margin:0 0 2.5mm; } ul, ol { margin:0 0 3mm; padding-left:6mm; } li { margin-bottom:1mm; }
table { border-collapse:collapse; width:100%; margin-bottom:3mm; }
th, td { border:1px solid var(--line); padding:1.5mm 2.5mm; text-align:left; vertical-align:middle; }
th { background:var(--soft); }
.box { border:2px solid var(--line); border-radius:4mm; padding:3mm 4mm; margin-bottom:3mm; background:#fffdf8; }
.say { background:#eef4ff; border-left:4px solid var(--blue); padding:2mm 4mm; border-radius:2mm; font-style:italic; margin-bottom:3mm; }
.paws { display:inline-flex; gap:1px; vertical-align:middle; }
.big { font-size:18pt; font-weight:700; font-family:'Comfortaa', sans-serif; }
.cut { border:2px dashed #aaa; }
.pagebreak { break-before:page; }

/* ---- site chrome: top bar, page menu, contents, prev/next ---- */
.topbar { position:sticky; top:0; z-index:10; background:var(--blue); color:#fff; font-family:'Noto Sans', sans-serif; font-size:15px;
  display:flex; align-items:center; gap:10px; padding:8px 14px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.topbar a { color:#fff; text-decoration:none; }
.topbar .home { font-family:'Comfortaa', sans-serif; font-weight:700; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.topbar .here { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; }
.topbar button, .topbar summary { font:inherit; font-size:14px; padding:6px 12px; border-radius:8px; border:0; cursor:pointer; background:#fff; color:var(--blue); font-weight:700; list-style:none; white-space:nowrap; }
.topbar summary::-webkit-details-marker { display:none; }
.menu { position:relative; }
.menu[open] > div { position:absolute; right:0; top:calc(100% + 8px); background:#fff; color:var(--ink); border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.25);
  padding:8px; width:min(320px, 90vw); max-height:75vh; overflow:auto; }
.menu a { display:block; color:var(--ink); padding:8px 10px; border-radius:8px; }
.menu a:hover, .menu a.on { background:#eef4ff; }
.menu small { display:block; color:#888; font-size:12px; padding:8px 10px 2px; text-transform:uppercase; letter-spacing:.04em; }
.toc { width:210mm; margin:8mm auto -4mm; background:#fff; border-radius:3mm; padding:3mm 5mm; font-size:11pt; box-shadow:0 2px 12px rgba(0,0,0,.12); }
.toc summary { cursor:pointer; font-family:'Comfortaa', sans-serif; font-weight:700; color:var(--blue); }
.toc ol { margin:2mm 0 0; } .toc a { color:var(--ink); }
.pager { width:210mm; margin:0 auto 10mm; display:flex; justify-content:space-between; gap:10px; font-family:'Comfortaa', sans-serif; font-weight:700; }
.pager a { background:#fff; color:var(--blue); text-decoration:none; padding:10px 16px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.12); max-width:48%; }
.pager a.next { margin-left:auto; text-align:right; }
.printnote { display:none; }
h2[id] { scroll-margin-top:60px; }

@media print {
  html, body { background:#fff; }
  .sheet { margin:0; box-shadow:none; padding:0; width:auto; min-height:auto; }
  .topbar, .toc, .pager, .printnote { display:none !important; }
  .sheet + .sheet { break-before:page; }
  .box, tr, .card, .tok, .face, .abil { break-inside:avoid; }
}

/* ---- phone / narrow screen: one readable column instead of A4 sheets ---- */
@media screen and (max-width: 860px) {
  html, body { background:#f4f1ea; font-size:16px; }
  .topbar .here { display:none; } .topbar .home span { display:none; } .topbar .home { flex:1; }
  .topbar .home::after { content:"Κουτάβια Διάσωσης"; }
  .sheet, .cardsheet { width:auto !important; height:auto !important; min-height:0 !important; margin:12px 10px !important; padding:16px !important;
    border-radius:14px; box-shadow:0 1px 6px rgba(0,0,0,.12) !important; display:block !important; }
  .cardsheet::after { display:none !important; }
  body .sheet, body .sheet.rules { font-size:16px; line-height:1.5; }
  h1 { font-size:26px; } h2 { font-size:20px; margin-top:22px; } h3 { font-size:17px; }
  ul, ol { padding-left:22px; }
  .toc, .pager { width:auto; margin:12px 10px; border-radius:14px; }
  .toc { font-size:16px; padding:12px 16px; } .toc li { margin-bottom:6px; }
  .pager { margin-bottom:24px; } .pager a { padding:14px 16px; }
  .printnote { display:block; margin:12px 10px 0; background:#fff8dd; border:2px dashed #e0b100; border-radius:14px; padding:10px 14px; font-size:15px; }
  table { display:block; overflow-x:auto; }
  .say, .ask, .box, .prep, .choice, .talk, .letterbox, .learn { border-radius:10px; }
  /* pictures and page-specific grids (body prefix wins over the page stylesheets) */
  body main img.svg { max-width:100%; height:auto; }
  body .two, body .prints { grid-template-columns:1fr; }
  /* tables become stacked cards: no squeezed columns */
  body .sheet table, body .sheet tbody, body .sheet tr, body .sheet td { display:block; width:auto; }
  body .sheet table { overflow:visible; }
  body .sheet tr:first-child:has(th) { display:none; }
  body .sheet tr { border:2px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:8px; background:#fffdf8; }
  body .sheet td { border:0; padding:2px 0; }
  body .sheet td:first-child { font-weight:700; color:var(--blue); }
  body .sheet td.big { font-size:26px; line-height:1.1; }
  /* mission header: picture on top, then the text */
  body .hdr { display:flex; flex-direction:column-reverse; gap:0; }
  body .hdr > div:last-child { text-align:center; } body .hdr > div:last-child img { width:110px; }
  body .learn { grid-template-columns:1fr; }
  /* a roll: target number as a header row instead of an empty side column */
  body .ch { display:block; padding:10px 14px; }
  body .ch .t { display:flex; align-items:baseline; gap:10px; border-right:0; border-bottom:2px dashed var(--line); padding:0 0 6px; margin-bottom:8px; text-align:left; }
  body .ch .t .big { font-size:32px; display:inline; }
  body .ch .t small { display:inline; font-size:13px; }
  body .team .job { grid-template-columns:36px 1fr; }
  /* stickers: readable size, full width */
  body .stk { width:auto; max-width:100%; height:auto; min-height:40px; padding:4px 10px; font-size:14px; gap:8px; }
  body .stk .ic { font-size:22px; } body .stk .pv { font-size:14px; }
  body .rew .stk { display:flex; margin:6px 0 0; }
  /* tokens page */
  body .strip { flex-wrap:wrap; gap:4px; } body .strip .c { width:38px; height:38px; font-size:13px; border-width:2px; } body .strip .lab { font-size:24px; width:30px; }
  body .toks { grid-template-columns:repeat(auto-fill, minmax(58px, 1fr)); } body .tok { width:54px; height:54px; } body .tok img { width:36px; }
  body .turn { width:150px; height:150px; font-size:17px; margin:0 8px 8px 0; } body .turn img { width:56px; }
  body .faces { grid-template-columns:repeat(2, 1fr); }
  body .ducks, body .turtles { grid-template-columns:repeat(3, 1fr); }
  body .sort { grid-template-columns:repeat(2, 1fr); }
  body .bins { grid-template-columns:1fr; } body .bins div { padding:10px; }
  /* challenge cards: two small cards per row, no fixed height */
  body .cc { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  body .ccard { height:auto; padding:8px; } body .ccard .d { flex:none; margin-bottom:6px; } body .ccard .n { font-size:40px; }
  body .ccard .e { font-size:34px; } body .ccard .fit { letter-spacing:2px; font-size:18px; } body .ccard .jobs div { font-size:22px; }
  body .cut { max-width:100%; }
  /* pup cards: one column, name first, sticker slots in two columns */
  body .half { height:auto; padding:0 0 16px; }
  body .card { display:flex; flex-direction:column; height:auto; gap:8px; padding:14px; }
  body .card .right { order:-1; }
  body .card .art { height:auto; padding:8px; } body .card .art img { width:150px; height:auto; }
  body .card .name { font-size:34px; } body .card .role { font-size:15px; } body .card .label { font-size:13px; margin-top:12px; }
  body .abils { grid-template-columns:1fr 1fr; gap:0 8px; }
  body .slot { width:100%; height:40px; font-size:13px; }
  body .card .stk { width:100%; }
  body .bank small { font-size:12px; } body .badges span { max-width:none; }
  body .stkpage .stkrow { display:grid; grid-template-columns:1fr; gap:6px; }
}

.stk { width:54mm; height:10mm; border:1.5px solid var(--c, #2f6fd6); border-radius:3mm; background:#fff; display:inline-flex; align-items:center; gap:1.5mm; padding:0 2mm; font-size:8.5pt; line-height:1.1; font-weight:700; vertical-align:top; overflow:hidden; }
.stk .ic { flex:none; width:7.5mm; height:7.5mm; display:flex; align-items:center; justify-content:center; font-size:13pt; line-height:1; text-align:center; }
.stk .nm { flex:1; min-width:0; }
/* on screen a sticker grows with its content, so large text settings never clip an icon; on paper it stays 54 x 10 mm */
@media screen { .stk { height:auto; min-height:10mm; padding-top:0.8mm; padding-bottom:0.8mm; } .stk .ic { width:auto; min-width:7.5mm; height:auto; min-height:7.5mm; line-height:normal; } }
.stk .pv { flex:none; display:flex; align-items:center; gap:0.5mm; font-size:9pt; }
.stk.tool { border-color:#c98b2e; background:#fff8ea; }
.stk.veh { border-color:#555; background:#f3f3f3; }
.stkrow { display:flex; flex-wrap:wrap; gap:2mm; margin-bottom:2mm; }
.icons { display:inline-flex; gap:1mm; font-size:14pt; vertical-align:middle; background:#fff; border:1.5px solid var(--line); border-radius:2mm; padding:0 1.5mm; margin-right:1mm; }
.strip { display:flex; gap:2mm; align-items:center; margin:2mm 0; }
.strip .lab { font-family:'Comfortaa', sans-serif; font-weight:700; font-size:22pt; color:var(--blue); width:16mm; text-align:center; }
.strip .c { width:21mm; height:21mm; border:2.5px solid var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12pt; color:#c9d6f0; font-weight:700; background:#fff; }
.strip.mini .c { width:12mm; height:12mm; font-size:8pt; border-width:2px; }
.strip.mini .lab { font-size:14pt; width:9mm; }