/* Per-puzzle visuals. Every selector is namespaced .p<id>. */

.p { display: grid; place-items: center; width: 100%; }

/* 1 - Reading between the lines */
.p1 { display: flex; align-items: center; justify-content: center; width: 100%; color: #f2f4f8; }
.p1 .p1-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3.4vh, 46px); }
.p1 .p1-line { display: block; width: clamp(230px, 62vw, 1000px); height: clamp(5px, 0.9vh, 12px); background: #f2f4f8; border-radius: 999px; }
.p1 .p1-word { font-size: clamp(38px, 9.5vw, 175px); font-weight: 900; letter-spacing: 0.05em; line-height: 1; color: #ffcc33; white-space: nowrap; }

/* 2 - Elephant in the room */
.p2 { display:flex; align-items:center; justify-content:center; width:100%; }
/* An elephant filling a room - nobody mentions it. */
.p2 .p2-svg { width:clamp(260px,50vw,680px); height:auto; max-height:58vh; display:block; }

/* 3 - Repeat after me */
.p3 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2.2vh, 26px); width: 90vw; max-width: 90vw; height: 60vh; margin: 0 auto; color: #f2f4f8; }
.p3 .p3-line { display: flex; align-items: baseline; justify-content: center; white-space: nowrap; max-width: 100%; }
.p3 .p3-me { font-size: clamp(40px, 9vw, 180px); font-weight: 900; letter-spacing: 0.01em; line-height: 1; color: #ffcc33; }
.p3 .p3-rep { font-size: clamp(40px, 9vw, 180px); font-weight: 900; letter-spacing: 0.01em; line-height: 1; color: #f2f4f8; margin-left: -0.02em; }
.p3 .p3-arrow { width: clamp(180px, 46vw, 560px); max-width: 84vw; height: auto; display: block; }

/* 4 - Split second */
.p4 { display:flex; align-items:center; justify-content:center; width:100%; }
.p4 .p4-row { display:flex; align-items:center; justify-content:center; }
.p4 .p4-h { font-size:clamp(40px,11vw,200px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#f2f4f8; }
.p4 .p4-gap { display:block; width:clamp(30px,7vw,120px); }

/* 5 - Backward */
.p5 { display:flex; align-items:center; justify-content:center; width:100%; }
.p5 .p5-word { font-size:clamp(42px,13vw,240px); font-weight:900; letter-spacing:0.06em; line-height:1; color:#f2f4f8; white-space:nowrap; }

/* 6 - Once upon a time */
.p6 { display:flex; align-items:center; justify-content:center; width:100%; }
.p6 .p6-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(6px,1.6vh,20px); }
.p6 .p6-once { font-size:clamp(36px,9.5vw,175px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#ffcc33; }
.p6 .p6-rule { display:block; width:clamp(200px,50vw,820px); height:clamp(4px,0.7vh,9px); background:#f2f4f8; opacity:0.5; border-radius:999px; }
.p6 .p6-time { font-size:clamp(36px,9.5vw,175px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#f2f4f8; white-space:nowrap; }

/* 7 - Mixed feelings */
.p7 { display:flex; align-items:center; justify-content:center; width:100%; }
/* Two opposite feelings tangled together - both fully readable, but crossing
   each other so they are plainly mixed. Earlier attempts encoded the idea (a
   flip, a scramble, an interleave) and each needed the answer to make sense;
   this one just shows it. */
.p7 .p7-stack { position:relative; display:grid; place-items:center; padding:clamp(18px,4vh,46px) 0; }
.p7 .p7-w { grid-area:1 / 1; font-weight:900; line-height:1; white-space:nowrap; }
.p7 .p7-happy { font-size:clamp(32px,8.6vw,160px); letter-spacing:0.03em; color:#f2f4f8; transform:rotate(-8deg) translate(-0.10em, -0.22em); }
.p7 .p7-sad { font-size:clamp(32px,8.6vw,160px); letter-spacing:0.05em; color:#ffcc33; transform:rotate(11deg) translate(0.30em, 0.30em); }


/* 8 - Inside job */
.p8 { display:flex; align-items:center; justify-content:center; width:90vw; max-width:90vw; min-height:40vh; color:#f2f4f8; }
.p8 .p8-outer { position:relative; border:clamp(4px,0.8vw,12px) solid #f2f4f8; border-radius:clamp(8px,1.4vw,20px); padding:clamp(46px,9vw,140px) clamp(36px,10vw,160px) clamp(30px,7vw,110px); display:flex; align-items:center; justify-content:center; max-width:86vw; box-sizing:border-box; }
.p8 .p8-tag { position:absolute; top:clamp(8px,1.4vw,20px); left:50%; transform:translateX(-50%); font-size:clamp(20px,4vw,70px); font-weight:900; letter-spacing:0.1em; color:#f2f4f8; white-space:nowrap; }
.p8 .p8-word { font-size:clamp(40px,11vw,180px); font-weight:900; letter-spacing:0.06em; line-height:1; color:#ffcc33; }

/* 9 - Split personality */
.p9 { display:flex; align-items:center; justify-content:center; width:100%; }
/* One word cleanly severed in two, the halves knocked out of line. */
.p9 .p9-col { display:flex; flex-direction:column; align-items:center; gap:clamp(4px,1vh,12px); }
.p9 .p9-a { font-size:clamp(30px,7.6vw,140px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#f2f4f8; align-self:flex-start; }
.p9 .p9-cut { display:block; width:clamp(210px,54vw,880px); height:clamp(4px,0.7vh,10px); background:#ffcc33; border-radius:999px; }
.p9 .p9-b { font-size:clamp(30px,7.6vw,140px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#f2f4f8; align-self:flex-end; }

/* 10 - Tip of the iceberg */
.p10 { display:flex; align-items:center; justify-content:center; width:100%; }
/* Only the tip shows above the waterline - the mass below is the point. */
.p10 .p10-svg { width:clamp(240px,46vw,620px); height:auto; max-height:58vh; display:block; }

/* 11 - Bend over backwards */
.p11 { display:flex; align-items:center; justify-content:center; width:100%; }
.p11 .p11-stack { display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.4vh,18px); }
.p11 .p11-bend { font-size:clamp(30px,7.6vw,140px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#f2f4f8; }
.p11 .p11-rule { display:block; width:clamp(220px,54vw,880px); height:clamp(4px,0.7vh,10px); background:#f2f4f8; opacity:0.5; border-radius:999px; }
/* BACKWARDS written backwards, sitting under BEND: bend over backwards. */
.p11 .p11-back { font-size:clamp(24px,6vw,110px); font-weight:900; letter-spacing:0.06em; line-height:1; color:#ffcc33; white-space:nowrap; }

/* 12 - Man overboard */
.p12 { display:flex; align-items:center; justify-content:center; width:100%; }
/* A figure pitching head-first off a boat's deck into the sea - no labels. */
.p12 .p12-svg { width:clamp(280px,58vw,800px); height:auto; max-height:58vh; display:block; }

/* 13 - Safety in numbers */
.p13 { display:flex; align-items:center; justify-content:center; width:100%; }
/* The word sits surrounded by numerals: safety, in numbers. Showing one word
   against a crowd of the same word read as a comparison instead, and never
   said "numbers" at all. */
.p13 .p13-field { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(5px,1.1vw,18px); max-width:88vw; }
.p13 .p13-n { font-size:clamp(13px,2.6vw,46px); font-weight:800; color:#4d5567; line-height:1; font-variant-numeric:tabular-nums; }
.p13 .p13-word { font-size:clamp(22px,5.4vw,96px); font-weight:900; letter-spacing:0.04em; color:#ffcc33; line-height:1; margin:0 clamp(4px,1vw,14px); }


/* 14 - Beating around the bush */
.p14 { display:flex; align-items:center; justify-content:center; width:100%; }
/* BEATING circles BUSH - the arrangement itself says "around". */
.p14 .p14-ring { position:relative; width:clamp(280px,62vw,880px); height:clamp(210px,44vh,560px); }
.p14 .p14-b { position:absolute; font-size:clamp(15px,3.4vw,62px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#f2f4f8; white-space:nowrap; }
.p14 .p14-b1 { top:0; left:50%; transform:translateX(-50%); }
.p14 .p14-b2 { top:50%; right:0; transform:translateY(-50%) rotate(90deg); transform-origin:center; }
.p14 .p14-b3 { bottom:0; left:50%; transform:translateX(-50%) rotate(180deg); }
.p14 .p14-b4 { top:50%; left:0; transform:translateY(-50%) rotate(-90deg); transform-origin:center; }
.p14 .p14-bush { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:clamp(26px,6.6vw,120px); font-weight:900; letter-spacing:0.06em; line-height:1; color:#ffcc33; }

/* 15 - Crossroads */
.p15 { display:flex; align-items:center; justify-content:center; width:100%; }
/* Two roads meeting at right angles, lane markings stopping at the junction. */
.p15 .p15-svg { width:clamp(230px,40vw,520px); height:auto; max-height:58vh; display:block; }
/* Wide letter-spacing leaves gaps, so the vertical word threads through
   the horizontal one without either becoming unreadable. */
.p15 .p15-v { color:#ffcc33; transform:rotate(90deg); }

/* 16 - Open house */
.p16 { display:flex; align-items:center; justify-content:center; width:100%; }
.p16 .p16-wrap { position:relative; display:flex; align-items:center; justify-content:center; border:clamp(5px,0.9vw,14px) solid #f2f4f8; border-radius:clamp(6px,1vw,14px); padding:clamp(34px,8vw,130px) clamp(40px,10vw,170px) clamp(56px,12vw,190px); box-sizing:border-box; max-width:88vw; }
.p16 .p16-w { font-size:clamp(32px,8.4vw,155px); font-weight:900; letter-spacing:0.1em; color:#f2f4f8; line-height:1; white-space:nowrap; }
/* A doorway cut clean through the bottom wall - the house stands open. */
.p16 .p16-door { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(-1 * clamp(5px,0.9vw,14px)); width:clamp(56px,14vw,220px); height:clamp(38px,8vw,130px); background:#0b0d12; border-left:clamp(5px,0.9vw,14px) solid #ffcc33; border-right:clamp(5px,0.9vw,14px) solid #ffcc33; box-sizing:border-box; }

/* 17 - Painless */
.p17 { display:flex; align-items:center; justify-content:center; width:100%; }
.p17 .p17-row { display:flex; align-items:center; justify-content:center; gap:clamp(16px,4vw,70px); }
.p17 .p17-pain { font-size:clamp(38px,10vw,185px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#f2f4f8; }
/* PAIN with a minus sign: pain less. */
.p17 .p17-minus { font-size:clamp(46px,12vw,220px); font-weight:900; line-height:1; color:#ffcc33; }

/* 18 - Down to earth */
.p18 { display:flex; align-items:center; justify-content:center; width:100%; }
.p18 .p18-wrap { position:relative; display:flex; flex-direction:column; align-items:flex-start; }
/* D-O-W-N steps downward and lands on the ground line marked EARTH. */
.p18 .p18-d { font-size:clamp(22px,5.4vw,96px); font-weight:900; line-height:1.05; color:#ffcc33; display:block; }
.p18 .p18-d1 { margin-left:0; }
.p18 .p18-d2 { margin-left:clamp(16px,4vw,70px); }
.p18 .p18-d3 { margin-left:clamp(32px,8vw,140px); }
.p18 .p18-d4 { margin-left:clamp(48px,12vw,210px); }
.p18 .p18-ground { display:block; width:clamp(230px,58vw,900px); height:clamp(5px,0.9vh,12px); background:#f2f4f8; border-radius:999px; margin-top:clamp(6px,1.2vh,16px); }
.p18 .p18-earth { align-self:center; margin-top:clamp(8px,1.6vh,20px); font-size:clamp(26px,6.6vw,120px); font-weight:900; letter-spacing:0.1em; line-height:1; color:#f2f4f8; }

/* 19 - Missing you */
.p19 { display:flex; align-items:center; justify-content:center; width:100%; }
/* The alphabet with one letter cut out - work out which one is missing. */
.p19 .p19-wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(4px,1.1vw,18px); max-width:88vw; }
.p19 .p19-l { font-size:clamp(20px,4.4vw,80px); font-weight:900; line-height:1; color:#f2f4f8; }
.p19 .p19-gap { font-size:clamp(20px,4.4vw,80px); font-weight:900; line-height:1; color:#ffcc33; }

/* 20 - Space invaders */
.p20 { display:flex; align-items:center; justify-content:center; width:100%; }
.p20 .p20-row { display:flex; align-items:center; justify-content:center; gap:clamp(6px,1.6vw,26px); flex-wrap:nowrap; max-width:92vw; }
.p20 .p20-w { font-size:clamp(26px,6.6vw,120px); font-weight:900; letter-spacing:0.3em; line-height:1; color:#f2f4f8; white-space:nowrap; }
/* A word shoved into the middle of S P A C E - something has invaded it. */
.p20 .p20-int { font-size:clamp(20px,5vw,90px); font-weight:900; letter-spacing:0.04em; line-height:1; color:#ffcc33; white-space:nowrap; }

/* ---------- phone ----------
 * Several puzzles size themselves against the viewport height, which assumes
 * the full-screen desktop stage. On a phone the stage is only part of the
 * column, so cap everything to the space actually available and let the
 * drawings scale down with it. */

@media (max-width: 780px) {
  .p { max-width: 100%; }

  .p svg { max-height: 100%; width: 100%; height: auto; }

  /* Puzzles that hard-code a tall box. */
  .p2, .p3, .p5, .p7, .p8, .p16, .p17, .p18, .p20 {
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  /* SVG-based drawings: fit the column, never overflow it. */
  .p2 .p2-svg, .p10 .p10-svg, .p12 .p12-svg, .p15 .p15-svg {
    width: 100%;
    max-height: 100%;
    max-width: 100%;
  }

  /* Ring and cross layouts are square; keep them inside the narrow column. */
  .p14 .p14-ring {
    width: min(88vw, 62vh);
    height: min(72vw, 52vh);
  }

  .p15 .p15-cross { width: min(80vw, 52vh); height: min(80vw, 52vh); }

  /* Long single-line puzzles need to shrink rather than clip. */
  .p9 .p9-a, .p9 .p9-b,
  .p11 .p11-bend, .p11 .p11-back,
  .p18 .p18-earth { white-space: nowrap; }

  .p13 .p13-grid { grid-template-columns: repeat(3, auto); }
}

@media (max-width: 420px) {
  .p13 .p13-grid { grid-template-columns: repeat(2, auto); }
  .p19 .p19-wrap { gap: 3px; }
}