/* Schnitzeljagd-Generator.
   Hand-made paper craft: warm paper ground, grain, cut-out edges, stamped numerals.
   The chosen theme owns the page: its OKLCH hue drives every accent, so picking
   "Piraten" recolours everything. Lightness is fixed per role, so contrast holds
   across all 15 themes. See DESIGN.md. */
:root{
  /* the ground is theme-tinted squared paper, like a school exercise book.
     Surfaces sit on it as near-white sheets. */
  --page:       oklch(0.963 0.022 var(--h));
  --grid:       oklch(0.928 0.030 var(--h));
  --paper:      oklch(0.995 0.004 var(--h));
  --paper-2:    oklch(0.985 0.009 var(--h));
  --paper-3:    oklch(0.905 0.020 var(--h));
  --ink:        oklch(0.250 0.018 70);
  --ink-soft:   oklch(0.455 0.016 72);
  --ink-faint:  oklch(0.630 0.014 74);
  --rule:       oklch(0.872 0.022 var(--h));
  --h: 264; --c: 0.098;                     /* set per theme by app.js */
  --accent:     oklch(0.430 var(--c) var(--h));
  --accent-hi:  oklch(0.345 var(--c) var(--h));
  --accent-wash:oklch(0.956 0.030 var(--h));
  --accent-line:oklch(0.855 0.055 var(--h));
  --stamp:      oklch(0.512 calc(var(--c) * 1.3) var(--h));
  --stamp-hi:   oklch(0.450 calc(var(--c) * 1.3) var(--h));
  --theme:      var(--accent);
  --focus:      oklch(0.560 0.140 var(--h));
  --step--1: 0.826rem; --step-0: 1rem;     --step-1: 1.2rem;
  --step-2: 1.44rem;   --step-3: 1.728rem; --step-4: 2.074rem;
  --step-5: 2.488rem;  --step-6: 3.4rem;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --ease: cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font:var(--step-0)/1.6 var(--sans);
  font-synthesis-weight:none;
  background-color:var(--page);
  background-image:
    repeating-linear-gradient(to right,  var(--grid) 0 1.1px, transparent 1.1px 27px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1.1px, transparent 1.1px 27px);
  background-attachment:fixed;
  transition:background-color 420ms var(--ease);
}
/* paper grain: cheap, static, never intercepts a click */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.24 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* theme motif, tiled as a mask so the colour comes from --accent, not from the file.
   Two offset layers give a half-drop pattern instead of a rigid grid of glyphs. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-color:var(--accent);opacity:.085;
  -webkit-mask-image:var(--motif),var(--motif);mask-image:var(--motif),var(--motif);
  -webkit-mask-size:118px 118px,118px 118px;mask-size:118px 118px,118px 118px;
  -webkit-mask-position:0 0,59px 59px;mask-position:0 0,59px 59px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
}
body>*{position:relative;z-index:1}
.wrap{max-width:66rem;margin:0 auto;padding:0 1.25rem}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-hi)}
:where(button,select,input,a):focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}

/* ---------- masthead ---------- */
.top{border-bottom:1.5px dashed var(--rule);background:var(--paper)}
.top .wrap{display:flex;align-items:center;gap:.6rem 1rem;padding-block:0.85rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:700;letter-spacing:-0.014em;font-size:var(--step-2);color:var(--ink);text-decoration:none}
.brand span{color:var(--accent);transition:color 420ms var(--ease)}
.top nav{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.05rem;font-size:var(--step--1)}
.top nav a{color:var(--ink-soft);text-decoration:none}
.top nav a:hover{color:var(--accent)}
.themechip{
  display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--1);
  padding:.24rem .68rem .28rem;border-radius:100px;
  background:var(--accent-wash);color:var(--accent-hi);border:1.5px solid var(--accent-line);
  transition:background 420ms var(--ease),color 420ms var(--ease),border-color 420ms var(--ease);
}
.themechip .e{font-size:1rem;line-height:1}

/* ---------- intro ---------- */
.intro{padding:2.6rem 0 1.8rem;max-width:48rem}
.badge{
  display:inline-block;transform:rotate(-1.6deg);margin:0 0 .9rem;
  font-size:0.76rem;font-weight:640;letter-spacing:.07em;text-transform:uppercase;
  color:var(--stamp);background:var(--accent-wash);
  border:1.5px dashed var(--accent-line);border-radius:4px;padding:.34rem .7rem;
  transition:color 420ms var(--ease),background 420ms var(--ease),border-color 420ms var(--ease);
}
h1{font-family:var(--display);font-weight:700;font-size:var(--step-6);line-height:1.02;letter-spacing:-0.021em;margin:0 0 0.7rem}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);margin:0;max-width:38rem}
.lede strong{color:var(--ink);font-weight:600}

/* ---------- the sentence: a config you read, not a form ---------- */
.tool{
  position:relative;
  border:2.5px dashed var(--accent-line);border-radius:14px;
  background:var(--paper);padding:1.6rem 1.5rem 1.2rem;box-shadow:0 2px 0 var(--accent-line);
  transition:border-color 420ms var(--ease),background 420ms var(--ease);
}
.tool-hint{font-family:var(--sans);font-size:var(--step--1);color:var(--ink-faint);margin:0 0 1rem;letter-spacing:.01em}
.tool-hint b{color:var(--accent-hi);font-weight:660}
.sentence{
  font-family:var(--display);font-weight:600;
  font-size:var(--step-3);line-height:2.05;letter-spacing:-0.008em;
  color:var(--ink-soft);margin:0;text-wrap:pretty;
}
.nowrap{white-space:nowrap}
/* a pill with a caret reads as a control; a bold underlined word does not */
.slot{
  font:inherit;font-weight:700;color:var(--accent-hi);
  background:var(--accent-wash);border:1.5px solid var(--accent-line);
  padding:.05em .45em .09em;margin:0;border-radius:9px;cursor:pointer;
  transition:background 180ms var(--ease),color 180ms,border-color 180ms;
}
.slot::after{
  content:"▾";display:inline-block;font-family:var(--sans);font-size:.62em;
  margin-left:.35em;opacity:.7;transition:transform 220ms var(--ease);
}
.slot:hover{background:oklch(0.925 0.045 var(--h));border-color:var(--accent)}
.slot.is-open{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.slot.is-open::after{transform:rotate(180deg)}
.blank{
  font:inherit;font-weight:700;color:var(--accent-hi);
  background:var(--paper);border:1.5px dashed var(--accent-line);border-radius:9px;
  padding:.05em .4em .09em;min-width:3ch;max-width:14ch;field-sizing:content;
}
.blank-lg{max-width:20ch}
.blank::placeholder{color:var(--ink-faint);font-weight:600;font-style:italic}
.blank:hover{border-color:var(--accent)}
.blank:focus{outline:none;border-color:var(--accent);border-style:solid}

/* display:flex would override the hidden attribute, leaving an empty bordered
   strip in the layout whenever the panel is closed */
.panel[hidden]{display:none}
/* anchored under the pill that opened it, as an overlay: choosing never reflows
   the sentence, so nothing jumps while you are reading it */
.panel{
  position:absolute;z-index:20;display:flex;flex-wrap:wrap;gap:.45rem;
  padding:.85rem;background:var(--paper);
  border:1.5px solid var(--accent-line);border-radius:12px;
  max-width:min(34rem,calc(100% - 1.25rem));
  box-shadow:0 12px 30px -14px oklch(0.25 0.02 70/.4),0 2px 6px oklch(0.25 0.02 70/.07);
}
.chip{
  font:inherit;font-size:var(--step--1);font-weight:560;cursor:pointer;
  padding:.42rem .85rem;border-radius:100px;
  border:1.5px solid var(--paper-3);background:var(--paper);color:var(--ink-soft);
  transition:background 160ms var(--ease),color 160ms,border-color 160ms,transform 90ms var(--ease);
}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.chip:active{transform:translateY(0)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.5rem;width:100%}
.sticker{
  --sa:oklch(0.430 var(--c) var(--h)); --sw:oklch(0.956 0.030 var(--h)); --sl:oklch(0.855 0.055 var(--h));
  font:inherit;font-size:var(--step--1);cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;
  border:2px solid var(--sl);border-radius:10px;background:var(--sw);color:var(--sa);
  transition:transform 140ms var(--ease),box-shadow 140ms var(--ease);
}
.sticker .e{font-size:1.35rem;line-height:1}
.sticker .n{font-weight:620}
.sticker{text-decoration:none}
.sticker:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 6px 14px -8px oklch(0.25 .02 70/.45)}
.sticker[aria-current=true]{background:var(--sa);border-color:var(--sa);color:var(--paper)}
.warn{margin:.7rem 0 0;font-size:var(--step--1);color:var(--stamp);min-height:0}
.warn:empty{margin:0}

.actions{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center;margin-top:1.1rem;padding-top:1rem;border-top:1.5px dashed var(--rule)}
.btn{
  font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:0.6rem 1.05rem;
  border:2px solid var(--paper-3);background:var(--paper);color:var(--ink);
  transition:background 180ms var(--ease),border-color 180ms,color 180ms,transform 90ms var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:active{transform:translateY(1.5px)}
.btn-primary{background:var(--stamp);border-color:var(--stamp);color:oklch(0.99 0.004 var(--h));box-shadow:0 3px 0 var(--stamp-hi)}
.btn-primary:hover{background:var(--stamp-hi);border-color:var(--stamp-hi);color:oklch(0.99 0.004 var(--h))}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--stamp-hi)}
.actions .spacer{margin-left:auto}
.actions .note{font-size:0.76rem;color:var(--ink-faint);max-width:26rem}
#b-neu .d{display:inline-block;margin-right:.35rem;transition:transform 620ms var(--ease)}
#b-neu.rolling .d{transform:rotate(180deg) scale(1.35)}

/* ---------- the treasure map ---------- */
.result{margin:2.4rem 0 0}
.result h2{font-family:var(--display);font-size:var(--step-3);letter-spacing:-0.012em;margin:0 0 0.2rem;font-weight:700}
.result .sub{color:var(--ink-soft);font-size:var(--step--1);margin:0 0 1rem}
.sub-inline{font-family:var(--sans);font-weight:400;color:var(--ink-faint);font-size:var(--step--1)}
.map{
  border:2.5px dashed var(--accent-line);border-radius:14px;background:var(--paper);
  padding:.6rem .4rem;margin:0 0 1.8rem;overflow:hidden;box-shadow:0 2px 0 var(--accent-line);
  transition:border-color 420ms var(--ease);
}
.map svg{display:block;width:100%;height:auto}
.map .trail{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 14;opacity:.75}
.map .pin{fill:var(--paper);stroke:var(--accent);stroke-width:3.5}
.map .nr{font-family:var(--display);font-weight:700;font-size:26px;fill:var(--accent)}
.map .lbl{font-family:var(--sans);font-size:22px;fill:var(--ink-soft)}
.map .mk-goal .ring{fill:none;stroke:var(--stamp);stroke-width:3.5;stroke-dasharray:7 7}
.map .mk-goal .x{stroke:var(--stamp);stroke-width:6;stroke-linecap:round}
.map .mk-goal .lbl{fill:var(--stamp);font-weight:700}

/* ---------- plan table ---------- */
/* the table must scroll inside itself, never widen the page */
.plan-wrap{overflow-x:auto}
.plan{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.plan th{text-align:left;font-weight:600;color:var(--ink-soft);padding:0.5rem 0.7rem;border-bottom:1.5px solid var(--rule);font-size:0.78rem;letter-spacing:0.03em;text-transform:uppercase}
.plan td{padding:0.65rem 0.7rem;border-bottom:1px dashed var(--rule);vertical-align:top}
.plan tr:last-child td{border-bottom:0}
.plan .n{width:2.6rem;color:var(--ink-faint);font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:700}
.plan .ort{font-weight:640;white-space:nowrap}
.plan .tip{color:var(--ink-soft)}
.plan tr.schatz td{background:var(--accent-wash)}

/* ---------- card previews: paper notes on a table ---------- */
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));margin-top:1.5rem;padding:2px}
.card{
  position:relative;border:2px solid var(--rule);border-radius:10px;
  padding:1.05rem 1.15rem 1.2rem;background:var(--paper);
  --rot:0deg;transform:rotate(var(--rot));
  box-shadow:0 1px 2px oklch(0.25 0.02 70/.05),0 8px 16px -10px oklch(0.25 0.02 70/.2);
  transition:transform 260ms var(--ease),box-shadow 260ms var(--ease);
}
/* themed corner marks: the same glyph, four times, as a mask */
.card::before{
  content:"";position:absolute;inset:9px;pointer-events:none;
  background-color:var(--theme);opacity:.3;
  -webkit-mask-image:var(--mark),var(--mark),var(--mark),var(--mark);
  mask-image:var(--mark),var(--mark),var(--mark),var(--mark);
  -webkit-mask-position:left top,right top,left bottom,right bottom;
  mask-position:left top,right top,left bottom,right bottom;
  -webkit-mask-size:19px 19px;mask-size:19px 19px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.card::after{content:"";position:absolute;inset:5px;border:1.5px dashed var(--theme);border-radius:6px;opacity:.16;pointer-events:none}
.cards .card:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 2px 4px oklch(0.25 0.02 70/.07),0 16px 30px -14px oklch(0.25 0.02 70/.3);z-index:1}
.card .meta{font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:0.75rem;display:flex;align-items:center;gap:.55rem}
.card .meta .e{font-size:1.1rem;letter-spacing:0}
.card .meta .t{flex:1}
.card .num{
  display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  border:2px solid var(--theme);color:var(--theme);transform:rotate(-4deg);
  font-family:var(--display);font-size:.9rem;font-weight:700;letter-spacing:0;
}
.card .rid{font-family:var(--display);font-weight:600;font-size:1.1rem;line-height:1.5;white-space:pre-line;margin:0}
.card .story{font-family:var(--sans);font-size:var(--step--1);color:var(--ink-soft);margin:0 0 .85rem;line-height:1.5}
.card .task{margin:0.9rem 0 0;padding-top:0.75rem;border-top:1.5px dashed var(--rule);font-size:var(--step--1);color:var(--ink-soft)}
.card .task b{color:var(--ink);font-weight:640}
.card .foot{display:none}
.card.start{background:var(--accent-wash)}
.card.final{background:oklch(0.966 0.030 var(--h))}
@keyframes dealin{
  from{opacity:0;transform:translateY(16px) rotate(var(--rot)) scale(.98)}
  to  {opacity:1;transform:translateY(0)    rotate(var(--rot)) scale(1)}
}
body.dealing .cards .card{animation:dealin 440ms var(--ease) both;animation-delay:calc(var(--i,0) * 48ms)}

/* ---------- prose ---------- */
.prose{max-width:44rem;margin:3.2rem 0 0}
.prose h2{font-family:var(--display);font-size:var(--step-3);letter-spacing:-0.012em;margin:2.1rem 0 0.55rem;font-weight:700}
.prose h3{font-size:var(--step-1);margin:1.5rem 0 0.4rem;font-weight:640}
.prose p,.prose li{color:oklch(0.335 0.017 70);line-height:1.68}
.prose ul{padding-left:1.15rem}
.prose li{margin:0.3rem 0}
.linkgrid{display:flex;flex-wrap:wrap;gap:0.45rem;margin:0.9rem 0 0;padding:0;list-style:none}
.linkgrid a{display:inline-block;font-size:var(--step--1);padding:0.36rem 0.75rem;border:1.5px solid var(--rule);border-radius:100px;background:var(--paper);text-decoration:none;color:var(--ink-soft);transition:border-color 180ms,color 180ms,transform 140ms var(--ease)}
.linkgrid a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px) rotate(-1deg)}
.tgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:.7rem;margin:1.2rem 0 .4rem}
.tgal .tcard{
  --sa:oklch(0.430 var(--c) var(--h));
  --sw:oklch(0.958 0.032 var(--h));
  --sl:oklch(0.858 0.058 var(--h));
  display:flex;flex-direction:column;gap:.12rem;text-decoration:none;
  padding:.8rem .9rem .9rem;border-radius:12px;
  background:var(--sw);border:2px solid var(--sl);color:var(--sa);
  transition:transform 160ms var(--ease),box-shadow 160ms var(--ease),border-color 160ms;
}
.tgal .tcard .e{font-size:1.65rem;line-height:1.15}
.tgal .tcard .n{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--sa)}
.tgal .tcard .d{font-size:.78rem;line-height:1.35;color:oklch(0.455 calc(var(--c) * .8) var(--h))}
.tgal .tcard:hover{transform:translateY(-3px) rotate(-1.1deg);border-color:var(--sa);box-shadow:0 12px 22px -14px oklch(0.25 0.02 70/.55)}
.tgal .tcard[aria-current=page]{background:var(--sa);border-color:var(--sa)}
.tgal .tcard[aria-current=page] .n{color:oklch(0.99 0.004 var(--h))}
.tgal .tcard[aria-current=page] .d{color:oklch(0.93 0.03 var(--h))}
.rlist{margin:1rem 0 0;padding:0;list-style:none}
.rlist li{border-bottom:1px dashed var(--rule);padding:0.9rem 0}
.rlist li:last-child{border-bottom:0}
.rlist .o{font-weight:640}
.rlist .q{font-family:var(--display);white-space:pre-line;margin:0.35rem 0 0;color:oklch(0.335 0.017 70)}
footer.site{border-top:1.5px dashed var(--rule);margin-top:3.5rem;padding:1.6rem 0 2.6rem;color:var(--ink-faint);font-size:var(--step--1)}
footer.site a{color:var(--ink-soft)}

@media (max-width:560px){
  :root{--step-6:2.35rem;--step-3:1.34rem}
  .plan .ort{white-space:normal}
  .plan th,.plan td{padding-left:.45rem;padding-right:.45rem}
  .tool{padding:1.15rem 1rem 1rem}
  .sentence{line-height:1.95}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .cards .card,.cards .card:hover{transform:none}
}

/* ---------- print: the actual product ---------- */
@media print{
  /* ONE paper size for the whole document. Chrome's print dialog applies a single
     paper size to the job, so a named @page with a different size cannot hold, and
     viewport units in paged media depend on dialog settings (headers/footers, scale).
     Both were fragile, so neither is used: card height is in mm and two cards flow
     onto each A4 sheet, cut apart along their own borders. */
  @page{size:A4 portrait;margin:12mm}
  body{background:#fff}
  body::before,body::after{display:none}
  .top,.intro,.tool,.prose,footer.site,.noprint{display:none !important}
  .result{margin:0}
  .cards{display:block;margin:0;padding:0}
  .card{
    /* A4 content height with 12mm margins is 273mm. Two cards at 116mm plus an 8mm
       gap is 240mm, so it still fits if the dialog steals room for headers/footers. */
    min-height:116mm;margin:0 0 8mm;
    border:2.5px solid var(--theme,#333);border-radius:10px;
    break-inside:avoid;page-break-inside:avoid;
    display:flex;flex-direction:column;justify-content:center;
    padding:10mm 11mm;text-align:center;
    transform:none !important;animation:none !important;box-shadow:none;
  }
  .card::after{inset:3.5mm;border:1px dashed var(--theme,#333);opacity:.4;border-radius:6px}
  .card::before{inset:5mm;opacity:.5;-webkit-mask-size:7mm 7mm;mask-size:7mm 7mm;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .card .meta{flex-direction:column;align-items:center;gap:.45rem;font-size:0.8rem;color:#555;margin-bottom:.9rem;letter-spacing:.08em}
  .card .meta .t{flex:0 1 auto}
  .card .meta .e{font-size:1.5rem}
  .card .num{width:2.4rem;height:2.4rem;font-size:1.15rem;border-width:2.5px}
  .card .story{font-size:.9rem;margin-bottom:.9rem}
  .card .rid{font-size:1.45rem;line-height:1.55}
  .card .task{font-size:.95rem;margin-top:1.1rem;border-top:1px dashed #bbb;padding-top:0.8rem}
  .card .foot{display:block;margin-top:auto;padding-top:.9rem;font-size:0.68rem;color:#9a9a9a;letter-spacing:.03em}
  body.print-plan .cards{display:none}
  body.print-cards .plan-wrap,body.print-cards .map{display:none}
  .map{border-color:#bbb;background:#fff;margin-bottom:6mm;break-inside:avoid;page-break-inside:avoid}
  .map .trail,.map .pin,.map .nr,.map .lbl,.map .ring,.map .x{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .plan{font-size:10.5pt}
  .plan tr.schatz td{background:#f2efe6}
  .plan tr{break-inside:avoid;page-break-inside:avoid}
  .card,.card.start,.card.final{background:#fff}
}