/* ============ Shop & items: board designs and X designs ============
   A board design is a set of colours and lines; an X design is the look of a marked square. Both are keyed on
   data-board / data-x, which js/shop.js sets on <html> (and on every little preview), so the same CSS dresses the
   real board and the pictures in the shop. Add an item in js/shop.js ITEMS, then give its key a block here. */

/* ---- what the ✕ is drawn with: the mask shape in the X design's ink ---- */
/* (the Garden / Inked default is in styles.css) */

/* ===== X designs ===== */
html[data-x="stitch"] .board:not(.mini) .cell.mark .glyph::before,
.shop-prev[data-x="stitch"] .cell.mark .glyph::before,
html[data-x="stitch"] .board:not(.mini) .cell.auto .glyph::before,
.shop-prev[data-x="stitch"] .cell.auto .glyph::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-dasharray='3.4 3.1'%3E%3Cpath d='M5 5 L19 19'/%3E%3Cpath d='M19 5 L5 19'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-dasharray='3.4 3.1'%3E%3Cpath d='M5 5 L19 19'/%3E%3Cpath d='M19 5 L5 19'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  width: 1.02em; height: 1.02em; opacity: .85; filter: none;
  background: var(--x-ink, #c8453a);               /* red thread by default; boards can dye it */
}
html[data-x="twig"] .board:not(.mini) .cell.mark .glyph::before,
.shop-prev[data-x="twig"] .cell.mark .glyph::before,
html[data-x="twig"] .board:not(.mini) .cell.auto .glyph::before,
.shop-prev[data-x="twig"] .cell.auto .glyph::before {
  -webkit-mask: none; mask: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M4.2 19.6 Q11 12.6 19 4.6' stroke='%233f2410' stroke-width='3.8'/%3E%3Cpath d='M4.2 19.6 Q11 12.6 19 4.6' stroke='%23a8693a' stroke-width='2.1'/%3E%3Cpath d='M5.4 18.2 Q11 12.8 17.6 6' stroke='%23d49a62' stroke-width='.7'/%3E%3Cpath d='M4.4 4.4 Q12 11.4 19.8 19.4' stroke='%233f2410' stroke-width='3.8'/%3E%3Cpath d='M4.4 4.4 Q12 11.4 19.8 19.4' stroke='%238a5328' stroke-width='2.1'/%3E%3Cpath d='M5.6 5.6 Q12 11.6 18.4 18' stroke='%23c18752' stroke-width='.7'/%3E%3C/g%3E%3Cg stroke='%231d4d1f' stroke-width='.9' stroke-linejoin='round'%3E%3Cpath d='M19 4.6 C22.4 4.2 23 7.6 21.4 9.2 C19.6 8.6 18.6 6.6 19 4.6Z' fill='%235cc54c'/%3E%3Cpath d='M19.8 19.4 C23 19.6 23 16.2 21.2 14.6 C19.6 15.4 19 17.6 19.8 19.4Z' fill='%237ad65c'/%3E%3Cpath d='M4.4 4.4 C1.8 4.6 1.6 7.6 3.2 8.8 C4.8 8.2 5.4 6 4.4 4.4Z' fill='%236fd25d'/%3E%3Cpath d='M4.2 19.6 C1.6 19.4 1.6 16.6 3.2 15.4 C4.8 16.2 5.2 18 4.2 19.6Z' fill='%234cae4f'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  width: 1.05em; height: 1.05em; opacity: 1; filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, .35));
}
html[data-x="glow"] .board:not(.mini) .cell.mark .glyph::before,
.shop-prev[data-x="glow"] .cell.mark .glyph::before,
html[data-x="glow"] .board:not(.mini) .cell.auto .glyph::before,
.shop-prev[data-x="glow"] .cell.auto .glyph::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5 L18.5 18.5'/%3E%3Cpath d='M18.5 5.5 L5.5 18.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5.5 5.5 L18.5 18.5'/%3E%3Cpath d='M18.5 5.5 L5.5 18.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  width: 1.02em; height: 1.02em; opacity: 1;
  background: linear-gradient(135deg, #ff4fd8, #6a7bff 55%, #4ff3ff);
  filter: drop-shadow(0 0 3px rgba(255, 90, 220, .95)) drop-shadow(0 0 7px rgba(80, 220, 255, .7));
}
html[data-x="twig"] .board:not(.mini) .cell.auto .glyph::before,
.shop-prev[data-x="twig"] .cell.auto .glyph::before { opacity: .3; filter: none; }
html[data-x="glow"] .board:not(.mini) .cell.auto .glyph::before,
.shop-prev[data-x="glow"] .cell.auto .glyph::before { opacity: .3; filter: none; }
html[data-x="stitch"] .board:not(.mini) .cell.auto .glyph::before,
.shop-prev[data-x="stitch"] .cell.auto .glyph::before { opacity: .3; }

/* ===== board designs: they only change colours and lines, never the shape of the puzzle ===== */
/* Candy Shop: bright sweets, glossy bubbles, white lines */
html[data-board="candy"] .board:not(.mini),
.shop-prev[data-board="candy"] .board {
  --c0: #ff7aa8; --c1: #ffb04d; --c2: #ffe55c; --c3: #86e86e; --c4: #55e6c4; --c5: #5ec6ff;
  --c6: #9a96ff; --c7: #cf84ff; --c8: #ff93dc; --c9: #e2aa6a; --c10: #7fe3d2; --c11: #ff8f6d;
  --line: #fff2f8; --x-ink: #8a2a5c; --cell-gloss: rgba(255, 255, 255, .5);
  border-color: #fff2f8; background: #fff2f8;
  box-shadow: 0 10px 28px -10px rgba(255, 80, 150, .55), 0 0 0 6px rgba(255, 170, 210, .45);
}
html[data-board="candy"] .board:not(.mini) .cell::before,
.shop-prev[data-board="candy"] .board .cell::before { background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 46%), linear-gradient(160deg, rgba(255, 255, 255, .25), transparent 60%); }

/* Stained Glass: jewel tones held in thick dark lead */
html[data-board="glass"] .board:not(.mini),
.shop-prev[data-board="glass"] .board {
  --c0: #c9362b; --c1: #e8821f; --c2: #f0c419; --c3: #2bb061; --c4: #14a58c; --c5: #2d86c6;
  --c6: #5d52cc; --c7: #9347b8; --c8: #d9386f; --c9: #a9772f; --c10: #1f9490; --c11: #d9571a;
  --line: #17121f; --x-ink: #fff4d6; --cell-gloss: rgba(255, 255, 255, .22); --thick: 4px !important;
  box-shadow: 0 10px 28px -10px rgba(40, 20, 80, .7), 0 0 0 6px rgba(60, 40, 90, .35);
}
.shop-prev[data-board="glass"] .board.mini { --thick: 3px !important; }
html[data-board="glass"] .board:not(.mini) .cell::before,
.shop-prev[data-board="glass"] .board .cell::before { background: linear-gradient(135deg, rgba(255, 255, 255, .42), transparent 38%, transparent 62%, rgba(0, 0, 0, .22)); }
html[data-board="glass"] .board:not(.mini) .cell,
.shop-prev[data-board="glass"] .board .cell { filter: saturate(1.1); }

/* Neon Night: dark tinted squares, glowing lines */
html[data-board="neon"] .board:not(.mini),
.shop-prev[data-board="neon"] .board {
  --c0: #7c1f52; --c1: #8c4a14; --c2: #7a7512; --c3: #1f6c30; --c4: #106c60; --c5: #17508c;
  --c6: #3d3196; --c7: #6c2c96; --c8: #8c2c6c; --c9: #5c4c34; --c10: #2b5b66; --c11: #8c3b1c;
  --line: #6df3ff; --x-ink: #6df3ff; --cell-gloss: rgba(255, 255, 255, .07);
  border-color: #6df3ff; background: #0a1020;
  box-shadow: 0 0 22px rgba(80, 235, 255, .55), 0 0 0 6px rgba(20, 40, 80, .6);
}
html[data-board="neon"] .board:not(.mini) .cell,
.shop-prev[data-board="neon"] .board .cell { filter: brightness(1.05); }
html[data-board="neon"] .board:not(.mini) .cell:hover,
.shop-prev[data-board="neon"] .board .cell:hover { filter: brightness(1.25); }
html[data-board="neon"] .board:not(.mini) .cell.mark .glyph::before,
.shop-prev[data-board="neon"] .board .cell.mark .glyph::before { filter: drop-shadow(0 0 4px #6df3ff); }
html[data-board="neon"][data-x="stitch"] .board:not(.mini),
.shop-prev[data-board="neon"][data-x="stitch"] .board { --x-ink: #ff7ad9; }

/* ===== shop screen ===== */
.shop-top-chip { display: inline-flex; align-items: center; gap: 6px; }
.shop-top-chip .seed-svg { width: 22px; height: 22px; }
.shop-top-chip b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.shop-tabs button {
  border: 0; border-radius: 14px; padding: 10px 6px; font-weight: 900; font-size: 1rem; background: transparent; color: var(--ink-soft); transition: background .15s, color .15s, transform .1s;
}
.shop-tabs button:active { transform: scale(.97); }
.shop-tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .15), inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.shop-body { display: flex; flex-direction: column; gap: 18px; padding-bottom: 12px; }
.shop-sec h3 { margin: 0 0 2px; font-size: 1.15rem; font-weight: 900; }
.shop-sec > p { margin: 0 0 10px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shop-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; padding: 10px;
  border: 0; border-radius: 20px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); transition: transform .12s;
}
.shop-card:active { transform: scale(.97); }
.shop-card.on { box-shadow: var(--shadow), inset 0 0 0 3px var(--good); }
.shop-card .shop-prev { align-self: center; width: 100%; max-width: 128px; aspect-ratio: 1; pointer-events: none; }
.shop-prev .board { animation: none; border-width: 3px; border-radius: 12px; box-shadow: none; }
.shop-prev .cell { cursor: default; }
.shop-prev .cell .glyph { animation: none !important; }
.shop-prev .cell:hover { filter: none; }
.shop-card b.nm { font-size: 1rem; font-weight: 900; line-height: 1.1; }
.shop-card small.ds { font-size: .7rem; font-weight: 700; color: var(--ink-soft); line-height: 1.25; min-height: 2.5em; }
.price-tag, .own-tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 7px; border-radius: 99px; font-weight: 900; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.price-tag { background: color-mix(in srgb, #a8692f 18%, var(--card)); box-shadow: inset 0 0 0 2px color-mix(in srgb, #a8692f 40%, transparent); }
.price-tag .seed-svg { width: 20px; height: 20px; }
.price-tag.short { opacity: .65; }
.own-tag { padding: 4px 11px; background: color-mix(in srgb, var(--good) 20%, var(--card)); color: color-mix(in srgb, var(--good) 75%, var(--ink)); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.shop-card.on .own-tag { background: var(--good); color: #fff; }
.shop-soon {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; text-align: left; width: 100%;
  border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); background: transparent; color: var(--ink-soft);
}
.shop-soon .ico { font-size: 1.7rem; }
.shop-soon b { display: block; color: var(--ink); font-size: 1rem; }
.shop-soon small { font-weight: 700; font-size: .78rem; }

/* My Items */
.look-hero { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow), inset 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); }
.look-hero .shop-prev { flex: none; width: 128px; aspect-ratio: 1; }
.look-hero .shop-prev .board { border-width: 3px; }
.look-hero .lh-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.look-hero .lh-text small { font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.look-hero .lh-text b { font-size: 1.05rem; font-weight: 900; }
.look-hero .lh-text em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.shop-card .src { font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.more-link { align-self: center; border: 0; border-radius: 99px; padding: 9px 18px; font-weight: 900; color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* item dialog */
dialog.card.shop-dlg { text-align: center; }
.shop-dlg .shop-prev { width: min(220px, 60vw); aspect-ratio: 1; margin: 4px auto 10px; }
.shop-dlg .shop-prev .board { border-width: 4px; border-radius: 16px; animation: none; box-shadow: var(--shadow); }
.shop-dlg h2 { margin: 0 0 2px; }
.shop-dlg .sub { margin: 0 0 10px; }
.shop-dlg .need { margin: 0 0 10px; font-weight: 800; font-size: .88rem; color: var(--ink-soft); }
.shop-dlg .need b { color: var(--ink); }
.shop-dlg .row { display: flex; flex-direction: column; }
.btn .seed-svg { width: 20px; height: 20px; vertical-align: -4px; margin: 0 2px; }
.btn[disabled] { opacity: .5; }

/* the Shop button on the home screen */
.big-btn.shop { --bc: #f5a623; --bd: #b97409; }
.big-btn.shop .bb-text small { max-width: 11ch; }
.shop-dot { position: absolute; top: 8px; right: 10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: #fff; color: #b97409; font-size: .72rem; font-weight: 900; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); animation: pill-bump 2.4s ease-in-out infinite; }
.shop-dot[hidden] { display: none; }

/* "More coming soon": an empty wooden crate after the last item of each section */
.shop-crate {
  position: relative; overflow: hidden; display: block; padding: 0; min-height: 176px; border: 0; border-radius: 20px; color: #3b2410;
  background:
    repeating-linear-gradient(0deg, transparent 0 41px, rgba(60, 33, 12, .55) 41px 44px),                 /* the gaps between planks */
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .10) 0 6px, rgba(0, 0, 0, .05) 6px 12px),          /* a little grain */
    linear-gradient(180deg, #d9a05b, #b97b3c);
  box-shadow: var(--shadow), inset 0 0 0 4px #8a5524, inset 0 0 0 7px #c68a47, inset 0 0 0 9px rgba(60, 33, 12, .35);
  transition: transform .12s;
}
.shop-crate:active { transform: scale(.97); }
.shop-crate::before, .shop-crate::after {                                                                  /* the two diagonal braces of the crate */
  content: ''; position: absolute; left: 50%; top: 50%; width: 150%; height: 14px; border-radius: 3px;
  background: linear-gradient(180deg, #a56a30, #8a5524); box-shadow: 0 2px 0 rgba(60, 33, 12, .35), inset 0 2px 0 rgba(255, 255, 255, .18);
}
.shop-crate::before { transform: translate(-50%, -50%) rotate(35deg); }
.shop-crate::after { transform: translate(-50%, -50%) rotate(-35deg); }
.shop-crate .nail { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0f0f0, #7c7c7c); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); z-index: 1; }
.shop-crate .nail:nth-child(1) { left: 12px; top: 12px; } .shop-crate .nail:nth-child(2) { right: 12px; top: 12px; }
.shop-crate .nail:nth-child(3) { left: 12px; bottom: 12px; } .shop-crate .nail:nth-child(4) { right: 12px; bottom: 12px; }
.shop-crate .tag {                                                                                         /* the diagonal label */
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 128%; padding: 6px 0; text-align: center; transform: translate(-50%, -50%) rotate(-24deg);
  background: #fff6dc; color: #4a2a0e; font-weight: 900; font-size: .92rem; letter-spacing: .03em; text-transform: uppercase;
  border-block: 2px solid #4a2a0e; box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
}
.shop-crate.wobble { animation: crate-wobble .5s ease; }
@keyframes crate-wobble { 0%, 100% { transform: none; } 20% { transform: rotate(-3deg) scale(1.02); } 50% { transform: rotate(2.5deg); } 80% { transform: rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .shop-crate.wobble { animation: none; } }

/* the Next level button that waits on a solved board once its pop-up is closed */
.next-bar { display: flex; justify-content: center; }
.next-bar .btn { min-width: min(280px, 80vw); font-size: 1.15rem; padding: 14px 22px; animation: pill-bump 2.4s ease-in-out infinite; }