/* Dream Life Rain: the page is made of the boards themselves. Warm paper, the board photographs, words as tiles of
   coloured paper, and a board beside the questions that fills itself as a clean mosaic.
   (The "paper, scissors and glue" look with the magazine cut-outs is kept in out/shop-v5-backup.)
   This file is also loaded by the order page and by the page of the four doors. */
body[data-store="snovy"] {
  --bg: #f8f3ec; --ink: #2a221e; --muted: #76685e; --line: #e3d8cb;
  --accent: #2a221e; --on-accent: #fbf6ee; --card: #fffdf9; --field: #fffdf9; --radius: 3px;
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
}
/* the three openings Matej chooses from (12. 11. 2026): a = the wall, b = the ribbon, c = the questions at once */
body[data-look="b"] { --bg: #f9eee8; --line: #ecd9cf; --card: #fffaf6; --field: #fffaf6; --accent: #b0406a; --on-accent: #fff7f2; --display: 'Fraunces', Georgia, serif; }
body[data-look="c"] { --accent: #2c5a99; --on-accent: #f9f6f0; --display: 'Fraunces', Georgia, serif; }
body[data-store="snovy"] .brand { font: 600 21px/1 var(--display); letter-spacing: -.01em; }
[data-store="snovy"] .top-cta { height: 38px; padding: 0 16px; }
body[data-store="snovy"] h1 { font-weight: 500; letter-spacing: -.018em; }
[data-store="snovy"] .ticket .t-main { font-weight: 500; }            /* the buyer's own page (order.html) wears the same type */
[data-store="snovy"] .lead { color: var(--muted); }

/* ---- the colours a board can have. Paper, ink, four papers for the words (t0 to t3) and one for the year (t4),
   each with the ink that reads on it. The lists the buyer picks from wear them too. */
[data-mood="warm"] { --paper: #fbf4ea; --b-ink: #33261f; --t0: #f2cdb0; --i0: #3a2a20; --t1: #c66c4b; --i1: #fff5ea; --t2: #f5dfa6; --i2: #3a2a20; --t3: #ecc5bc; --i3: #3a2a20; --t4: #3b2b23; --i4: #f8ecdc; }
[data-mood="light"] { --paper: #ffffff; --b-ink: #3a332e; --t0: #efe6d9; --i0: #3a332e; --t1: #d6e1e8; --i1: #2f3a42; --t2: #f6e6df; --i2: #3a332e; --t3: #e4ddd0; --i3: #3a332e; --t4: #b5a595; --i4: #ffffff; }
[data-mood="green"] { --paper: #f5f2e7; --b-ink: #2c3526; --t0: #cbd8be; --i0: #2c3526; --t1: #6a7a4b; --i1: #f7f4e8; --t2: #e8dfc8; --i2: #2c3526; --t3: #dcbfa2; --i3: #33261f; --t4: #3d573b; --i4: #f3f0e2; }
[data-mood="bold"] { --paper: #fff9f0; --b-ink: #1f1a17; --t0: #f3b33d; --i0: #1f1a17; --t1: #c2326a; --i1: #fff4ec; --t2: #2c5ea6; --i2: #f4f6fb; --t3: #ee6c4d; --i3: #fff7f0; --t4: #1f1a17; --i4: #fbf3e6; }
[data-mood="dark"] { --paper: #211b18; --b-ink: #efe4d3; --t0: #3d3029; --i0: #efe4d3; --t1: #a57e4c; --i1: #1d1714; --t2: #eadfce; --i2: #2a211c; --t3: #5b2b35; --i3: #f3e4dc; --t4: #8d8176; --i4: #1d1714; }

/* ---- the pieces: a photograph, a word on its paper, the year. A word's size goes by the piece it sits on. */
.ph { background: var(--t3); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wd, .yr { display: grid; place-items: center; text-align: center; container-type: size; }
.wd { --fs: 14.5cqmin; background: var(--t0); color: var(--i0); }
.wd.k1 { background: var(--t1); color: var(--i1); }
.wd.k2 { background: var(--t2); color: var(--i2); }
.wd.k3 { background: var(--t3); color: var(--i3); }
.wd.w-s { --fs: 21cqmin; } .wd.w-l { --fs: 11.2cqmin; } .wd.w-xl { --fs: 8.6cqmin; }
.wd p { margin: 0; padding: 0 8cqmin; font: 400 var(--fs)/1.08 'Fraunces', Georgia, serif; overflow-wrap: break-word; text-wrap: balance; }
.wd.f0 p { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 500; font-size: calc(var(--fs) * .88); line-height: 1.12; text-transform: uppercase; letter-spacing: .05em; }
.wd.f2 p { font-family: var(--text); font-weight: 600; font-size: calc(var(--fs) * .6); line-height: 1.5; text-transform: uppercase; letter-spacing: .2em; }
.wd.f3 p { font-family: 'Caveat', cursive; font-weight: 600; font-size: calc(var(--fs) * 1.34); line-height: .98; }
.yr { background: var(--t4); color: var(--i4); }
.yr b { font: 500 34cqmin/1 'Bodoni Moda', Georgia, serif; letter-spacing: -.01em; font-variant-numeric: lining-nums; }

/* ---- opening a: a wall of the board's pieces drifting slowly, and a label in the middle of it */
[data-store="snovy"] .wall { --g: 8px; --d: 48s; position: relative; height: min(clamp(520px, 76vh, 720px), 100vw / 3 * 4.6); padding: 0; overflow: hidden; background: var(--bg); }
.wall-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); padding: 0 var(--g); }
.wall-col:nth-child(n+4) { display: none; }
.wall-run { display: grid; gap: var(--g); animation: wall-up var(--d) linear infinite; will-change: transform; }      /* --d: about 13 px a second on every screen */
.wall-col:nth-child(even) .wall-run { animation-name: wall-down; animation-duration: calc(var(--d) * 1.24); }
.wall-col:nth-child(3n) .wall-run { animation-duration: calc(var(--d) * .86); }
.wt { width: 100%; aspect-ratio: 1; overflow: hidden; }
@keyframes wall-up { to { transform: translateY(calc(-50% - var(--g) / 2)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - var(--g) / 2)); } to { transform: none; } }
.wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.wall-label { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; width: min(600px, calc(100% - 40px)); padding: 38px 26px 34px;
  background: var(--bg); text-align: center; box-shadow: 0 0 0 1px rgba(42, 34, 30, .07), 0 34px 70px -26px rgba(42, 26, 14, .6); }
.wall-label::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--ink); pointer-events: none; }
.wall-label h1 { font-size: clamp(35px, 4.8vw, 62px); line-height: 1.02; }
.wall-label .lead { margin: 16px auto 0; max-width: 30ch; font-size: 17px; }
.wall-label .btn { position: relative; margin-top: 24px; }
@media (min-width: 700px) {
  [data-store="snovy"] .wall { --d: 70s; height: min(clamp(540px, 76vh, 720px), 100vw / 4 * 4.6); }
  .wall-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall-col:nth-child(4) { display: block; }
  .wall-label { padding: 52px 56px 48px; }
  .wall-label .lead { max-width: 34ch; font-size: 18.5px; }
}
@media (min-width: 1100px) {
  [data-store="snovy"] .wall { --g: 10px; --d: 84s; height: min(clamp(540px, 76vh, 720px), 100vw / 6 * 4.6); }
  .wall-cols { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wall-col:nth-child(n+4) { display: block; }
}

/* ---- opening b: the words in the middle of the page and one ribbon of pieces drifting past */
[data-store="snovy"] .opening { padding: 44px 0 0; text-align: center; overflow: hidden; }
.opening h1 { margin: 0 auto; max-width: 12.5ch; font-size: clamp(44px, 7.6vw, 104px); font-weight: 380; line-height: .98; letter-spacing: -.028em; }
.opening .lead { margin: 20px auto 0; max-width: 34ch; }
.opening .btn { margin-top: 26px; }
.ribbon { --g: 10px; --t: 150px; --drop: 24px; margin-top: 40px; }
.ribbon-run { display: flex; gap: var(--g); width: max-content; padding-bottom: var(--drop); animation: ribbon 230s linear infinite; will-change: transform; }
.rt { flex: none; width: var(--t); height: var(--t); overflow: hidden; }
.rt:nth-child(even) { translate: 0 var(--drop); }
@keyframes ribbon { to { transform: translateX(calc(-50% - var(--g) / 2)); } }
@media (min-width: 700px) {
  [data-store="snovy"] .opening { padding-top: 64px; }
  .ribbon { --t: 232px; --drop: 34px; margin-top: 52px; }
}

/* ---- the questions and the board */
[data-store="snovy"] .make { padding: 36px 0 72px; }
.bform { display: grid; gap: 28px; }
.bf-h, .quiz, .bf-s { min-width: 0; }
.bf-h h1 { font-size: clamp(38px, 4.6vw, 60px); font-weight: 520; line-height: 1.02; }
.bf-h .lead { margin-top: 16px; }
.q-top { display: flex; align-items: center; gap: 14px; }
.q-count { font: 600 14px/1 var(--text); color: var(--muted); font-variant-numeric: tabular-nums; }
.q-bar { display: flex; gap: 5px; width: 120px; }
.q-bar i { flex: 1; height: 3px; background: var(--line); transition: background-color .25s; }
.q-bar i.on { background: var(--accent); }
.q { margin-top: 18px; min-width: 0; }
.q legend { padding: 0; font: 500 clamp(27px, 2.9vw, 35px)/1.1 var(--display); letter-spacing: -.012em; }
.q-hint { margin-top: 8px; font-size: 15.5px; color: var(--muted); }
.q .field { margin-top: 22px; }
.q-label { margin-top: 22px; font: 600 14.5px/1.3 var(--text); }
.q-label + .chips { margin-top: 8px; }
[data-store="snovy"] .field input { border-width: 1px; }
[data-store="snovy"] .chip { min-height: 44px; padding: 11px 18px; border-width: 1px; background: var(--card); font-size: 15.5px; }
[data-store="snovy"] .chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--card); }

/* a theme is picked by its photograph */
.q-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 22px; }
.pick { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick img, .pick > i { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; background: var(--line); }
.pick span { display: block; margin-top: 9px; font: 600 15px/1.2 var(--text); text-align: center; }
.pick .tick { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--card); fill: none;
  stroke: var(--ink); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale: .4; transition: opacity .16s, scale .2s cubic-bezier(.2, .9, .3, 1.4); }
.pick:has(input:checked) img, .pick:has(input:checked) > i { outline: 2px solid var(--ink); outline-offset: 2px; }
.pick:has(input:checked) .tick { opacity: 1; scale: 1; }
.pick:has(input:focus-visible) img { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .pick img { transition: filter .2s; } .pick:hover img { filter: brightness(1.05) saturate(1.06); } }
@media (min-width: 560px) {
  .q-areas { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 12px; }
  .pick img, .pick > i { aspect-ratio: 1; }
  .pick span { font-size: 14px; }
  .pick .tick { right: 6px; top: 6px; width: 22px; height: 22px; padding: 4px; }
}

/* a word is picked as the tile it will be */
.q-wordlist { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.wchip { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 8px 16px; background: var(--t0); color: var(--i0); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity .2s; }
.wchip.k1 { background: var(--t1); color: var(--i1); }
.wchip.k2 { background: var(--t2); color: var(--i2); }
.wchip.k3 { background: var(--t3); color: var(--i3); }
.wchip input { position: absolute; opacity: 0; pointer-events: none; }
.wchip span { font: 400 18px/1.1 'Fraunces', Georgia, serif; }
.wchip.f0 span { font: 500 14.5px/1.1 'Bodoni Moda', Georgia, serif; text-transform: uppercase; letter-spacing: .06em; }
.wchip.f2 span { font: 600 11.5px/1.3 var(--text); text-transform: uppercase; letter-spacing: .18em; }
.wchip.f3 span { font: 600 24px/1 'Caveat', cursive; }
.wchip:has(input:checked) { outline: 2px solid var(--ink); outline-offset: 2px; }
.wchip:has(input:checked)::after { content: ""; position: absolute; right: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.6l2.9 2.9 6-7' fill='none' stroke='%23fffdf9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.wchip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.wchip:has(input:disabled) { opacity: .42; cursor: default; }

/* the colours are five small boards */
.q-moods { display: grid; gap: 8px; margin-top: 20px; }
.mood { position: relative; display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 14px 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mood input { position: absolute; opacity: 0; pointer-events: none; }
.mb { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 36px; aspect-ratio: 5 / 6; padding: 3px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 34, 30, .16); }
.mb i { background: var(--t0); }
.mb i:nth-child(2) { background: var(--t1); } .mb i:nth-child(3) { background: var(--t4); } .mb i:nth-child(4) { background: var(--t3); }
.mood b { font: 600 15.5px/1.25 var(--text); }
.mood:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mood:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 560px) {
  .q-moods { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mood { flex-direction: column; justify-content: flex-start; gap: 12px; padding: 16px 6px 12px; text-align: center; }
  .mb { width: 54px; gap: 3px; padding: 4px; }
  .mood b { font-size: 13.5px; }
}

/* the sizes are three boards of three sizes */
.boards { display: grid; gap: 10px; margin-top: 20px; }
.boards .item { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 0 14px; padding: 12px 16px 12px 12px; border-width: 1px; }
.boards .item:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.boards .bt b { display: block; font: 500 21px/1.15 var(--display); }
.boards .bt small { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.boards .item em { align-self: start; padding-top: 3px; font: 600 19px/1.2 var(--text); font-variant-numeric: tabular-nums; }
.bi { display: grid; place-items: center; align-self: start; height: 62px; }
.bi i { display: grid; grid-template: 3fr 2fr / 1fr 1fr; gap: 2px; width: 24px; aspect-ratio: 5 / 7; padding: 3px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 34, 30, .22); }
.bi u { background: var(--t0); }
.bi u:nth-child(2) { background: var(--t1); }
.bi u:nth-child(3) { grid-column: 1 / -1; background: var(--t3); }
.item.board .bi i { width: 32px; }
.item.board_grand .bi i { width: 38px; box-shadow: 0 0 0 1px var(--ink), 0 0 0 3px var(--paper), 0 0 0 4px var(--ink); }

.q-foot { margin-top: 26px; }
.q-foot .err { margin: 0 0 12px; }
.q-nav { display: flex; gap: 10px; }
.q-nav .btn { flex: 1 1 0; margin-top: 0; }
.q-nav .btn.ghost { flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--ink); }
.q-nav .btn.pay { padding: 0 14px; }
.pay-l { white-space: nowrap; }
.q-arrow { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b-cap { margin: 16px auto 0; max-width: 40ch; font-size: 14px; color: var(--muted); text-align: center; text-wrap: balance; }

@media (max-width: 959px) {
  /* a phone: the step's button waits at the bottom of the screen, and the board comes above the last step */
  .q-foot { z-index: 6; margin: 24px calc(var(--pad) * -1) 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background: var(--bg);
    border-top: 1px solid var(--line); }
  .quiz.live .q-foot { position: sticky; bottom: 0; }          /* .live: the questions are what the screen shows (board-quiz.js) */
  .q-nav .btn.ghost { width: 54px; padding: 0; }                 /* Back is an arrow here, so the step's own button has the room */
  .q-nav .btn.ghost span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .q-arrow { display: block; }
  .q-nav .btn.pay { min-width: 0; padding: 0 10px; font-size: clamp(15px, 4.2vw, 17px); }
  .boards .bt b { font-size: 19px; }
  .stage { max-width: 420px; margin: 0 auto; }                   /* a tablet: the board is never wider than a sheet of paper in the hand */
  .bform[data-step="size"] .bf-s { order: -1; }
  .bform[data-step="size"] .stage { max-width: 250px; margin: 0 auto; }
  .bform:not([data-step="areas"]) .bf-h { display: none; }
}
@media (max-width: 349px) { .pay-l { white-space: normal; line-height: 1.15; text-wrap: balance; } }       /* the smallest phones: the pay button may take two lines */
@media (min-width: 960px) {
  [data-store="snovy"] .make { padding: 64px 0 112px; }
  [data-look="c"] .make { padding-top: 56px; }
  .bform { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "q s"; gap: 0 56px; align-items: start; }
  [data-look="c"] .bform { grid-template-areas: "h s" "q s"; grid-template-rows: auto 1fr; }
  .bf-h { grid-area: h; padding-bottom: 36px; }
  .quiz { grid-area: q; padding: 30px 30px 32px; background: var(--card); border: 1px solid var(--line); }
  .bf-s { grid-area: s; position: sticky; top: calc(var(--top) + 24px); }
  .stage { max-width: calc((100vh - var(--top) - 150px) * 5 / 7); margin: 0 auto; }
}

/* ---- the board: a sheet of paper, its title, a mosaic of pieces that always fills it */
.stage { display: grid; place-items: center; }
.sheet { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 5 / 7; transition: scale .5s cubic-bezier(.2, .8, .2, 1); }
.sheet[data-size="board_pocket"] { scale: .74; }
.sheet[data-size="board"] { scale: .87; }
.sheet-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.4cqw 5.4cqw 3.6cqw; background: var(--paper); color: var(--b-ink);
  box-shadow: 0 1px 2px rgba(58, 40, 28, .1), 0 22px 46px -22px rgba(58, 40, 28, .42); transition: background-color .35s, color .35s; }
.sheet[data-size="board_grand"] .sheet-in { outline: 1px solid var(--b-ink); outline-offset: -1.5cqw;
  box-shadow: inset 0 0 0 2.4cqw var(--paper), inset 0 0 0 calc(2.4cqw + 1px) var(--b-ink), 0 1px 2px rgba(58, 40, 28, .1), 0 22px 46px -22px rgba(58, 40, 28, .42); }
.sheet-title { flex: none; margin: 0; padding-bottom: 3.8cqw; text-align: center; font: 500 8cqw/1 'Bodoni Moda', Georgia, serif; letter-spacing: -.012em; overflow-wrap: anywhere; text-wrap: balance; }
.sheet-title.long { font-size: 6cqw; }
.mosaic { flex: 1; min-height: 0; display: grid; place-items: center; }
.mosaic-in { display: flex; flex-direction: column; gap: 1.4cqw; width: 100%; height: 100%; }
.mrow { display: flex; gap: 1.4cqw; flex: 1 1 0; min-height: 0; }
.pc { position: relative; flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; container-type: size; transition: background-color .35s, color .35s; }
.sheet-foot { flex: none; margin: 0; padding-top: 2.8cqw; text-align: center; font: 500 2.3cqw/1.2 var(--text); letter-spacing: .04em; opacity: .62; }
.sheet .ph img { transition: filter .35s; }
.sheet[data-mood="light"] .ph img { filter: saturate(.86) brightness(1.05); }
.sheet[data-mood="green"] .ph img { filter: saturate(.92); }
.sheet[data-mood="bold"] .ph img { filter: saturate(1.2) contrast(1.04); }
.sheet[data-mood="dark"] .ph img { filter: saturate(.8) brightness(.88) contrast(1.06); }

@media (prefers-reduced-motion: reduce) {
  .wall-run, .ribbon-run { animation: none; }
  .sheet, .pick .tick { transition: none; }
}