/* Skin: "torn-paper treasure hunt" (design/STYLE.md). Every graphic is a Flow image from img/ (tools/build_assets.py);
   CSS only lays them out (9-slice for torn paper so the edges never stretch). Plain colours are the fallback. */
:root {
  --cream: #F6F0E4; --paper: #FFFDF8; --ink: #1D1D1B; --mint: #A9D9BC; --sky: #93C6E8; --butter: #F2D46E;
  --coral: #EF8B6F; --parchment: #EAD8B2; --route: #D9534A; --gold: #F2B632; --gold-ink: #3d2a00;
  --accent: #1f7a55; --accent-soft: #dff0e6; --muted: #5a5850; --faint: #9a968b; --line: #e3dccd;
  --frozen: #2f6fae; --frozen-soft: #e3eef8; --warn: #a35a00;
  --head: Fredoka, Rubik, system-ui, sans-serif;   /* Playpen Sans Hebrew tried 12.11: its מ reads as א and צ as 3 at a glance */
}
body { background: var(--cream); color: var(--ink); }
/* images that may not exist yet are only requested once img/manifest.json lists them (html.has-<name>) */
html.has-tex-cream body { background: var(--cream) url(img/tex-cream.webp) repeat; background-size: 512px; }
.top h1, .hunt-title h1, .ed-title h1, .area-title, .now-title, .finish-title, .step-title { font-family: var(--head); }
.top h1 { font-weight: 700; letter-spacing: 0; }
.go { font-weight: 600; }

/* torn paper card (9-slice: the torn edge band is never stretched across, only along) */
.paper {
  border: 18px solid transparent;
  border-image: url(img/card.webp) 9% 8% 10% 8% fill / 18px 16px 20px 16px / 0 round;
  background: none;   /* the card image carries its own halftone shadow */
}
.composer.paper { padding: 0; }
.composer.paper:focus-within { box-shadow: none; }
.composer textarea { color: var(--ink); }
.now-card.paper, .finish.paper { border-radius: 0; }

/* buttons: torn paper strips */
.go, .primary.small {
  background: none; color: var(--ink); box-shadow: none;
  border: 14px solid transparent; border-image: url(img/btn-mint.webp) 18% 6% fill / 14px 18px / 0 round;
}
.primary.small { border-image-source: url(img/btn-gold.webp); padding: 0 10px; height: 52px; min-width: 150px; font-weight: 700; }
.primary:disabled { opacity: .45; background: none; color: var(--ink); }
.go { height: 66px; font-family: var(--head); font-size: 20px; }
.go-sub { opacity: .75; }

/* department stickers instead of plain number circles */
.area-num.sticker, .stop .area-num.sticker {
  width: 44px; height: 44px; border-radius: 0; background: none center / contain no-repeat; position: relative; margin-top: -4px;
}
.area { grid-template-columns: 44px 1fr; }
.area-num.sticker b {
  position: absolute; inset-inline-end: -6px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700;
}

/* ink check circles */
.tick { border: 0; background: url(img/check-empty.webp) center / contain no-repeat; width: 34px; height: 34px; }
.tick svg { display: none; }
.find[aria-checked="true"] .tick { background: url(img/check-done.webp) center / contain no-repeat; animation: inked var(--dur-base) var(--ease-pop); }
@keyframes inked { 40% { transform: scale(1.15) rotate(-4deg); } }
.find[aria-checked="true"] .find-text { color: var(--faint); }

/* score on a torn yellow tag with the gold star */
.score { padding: 6px 14px 4px 10px; border: 10px solid transparent; border-image: url(img/tag.webp) 20% 8% fill / 10px 12px / 0 round; }
.score b { color: var(--ink); font-family: var(--head); }
.progress { background: rgba(29,29,27,.08); } .progress span { background: var(--route); }

/* hunt card + map */
.now-card { background: none; padding: 4px 6px 2px; }
.now-card.paper, .finish.paper, .composer.paper { border-style: solid; border-color: transparent; }   /* keep the 9-slice border width (app.css sets 2px) */
.now-label { color: var(--route); }
.now-card.frozen .now-label { color: var(--frozen); }
/* the map lies on a torn parchment sheet (9-slice); the texture tile is the fallback */
.map { border: 22px solid transparent; margin: 0 -8px;
  background: url(img/tex-parchment.webp) repeat; background-size: 360px; background-clip: padding-box; }   /* texture until the torn sheet lands */
html.has-map-sheet .map { border-image: url(img/map-sheet.webp) 7% 7% 8% 7% fill / 22px / 0 stretch; background: none; }   /* stretch: repeating the middle showed seams */
#map { background: none; border: 0; border-radius: 0; }
.draft-cap { margin-top: 2px; }
.m-leg.now { stroke: var(--route); stroke-width: .7; stroke-dasharray: 1.4 1; marker-end: url(#arrow); }
.m-leg.todo { stroke: var(--route); opacity: .35; stroke-dasharray: 1 1; stroke-width: .45; }
.m-leg.done { stroke: #b9ad92; }
.m-stop circle { stroke: var(--ink); stroke-width: .3; fill: var(--paper); } .m-stop text { fill: var(--ink); }
.m-stop.now circle.dot { fill: var(--gold); stroke: var(--ink); }
.m-stop.done circle { fill: var(--mint); stroke: var(--ink); } .m-stop.done text { fill: var(--ink); }
.m-ring { stroke: var(--gold); }

/* toast as an ink label */
.toast { background: var(--ink); border-radius: 4px 10px 6px 12px; }