/* /ja/ Gen-Z layer: Fuwapan, gel words, purikura, sticker book. Loaded only by the Japanese page, after ja.css.
   Everything here is static (tilts, no entrance motion) and every deco ignores the pointer. */
:root{--pink:#FF66AE;--kw:#FFE45C;--fw-shadow:drop-shadow(0 6px 8px rgb(8 6 50 / .32)) drop-shadow(0 1px 2px rgb(8 6 50 / .25))}

/* ---------- headlines: white, hard pink shadow, one yellow keyword ---------- */
.jw{text-shadow:0 .1em 0 var(--pink)}
.rebus .rl:nth-child(3)>.jw:first-child,
.kw-1 .lt>.jw:nth-child(1),.kw-2 .lt>.jw:nth-child(2),.kw-3 .lt>.jw:nth-child(3){color:var(--kw)}
/* the snip heading was split for its keyword: keep its old break after 写真が、 */
#snip-h .lt>.jw:first-child{margin-right:100%}
.lt{row-gap:.24em}

/* ---------- shared pieces ---------- */
.deco{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
  rotate:calc(var(--r,0)*1deg);filter:var(--fw-shadow)}
.fw-say{position:absolute;margin:0;z-index:4;background:#fff;color:var(--blue);font:400 clamp(15px,1.45vw,20px)/1.2 var(--f-hand);letter-spacing:.02em;
  padding:.45em .95em .5em;border-radius:22px;white-space:nowrap;rotate:-4deg;pointer-events:none;box-shadow:0 10px 18px -8px rgb(8 6 50 / .5)}
.fw-say::after{content:"";position:absolute;bottom:-5px;left:var(--tx,70%);width:13px;height:13px;background:#fff;rotate:45deg;border-radius:0 0 4px 0}
.fw-say.tail-up::after{bottom:auto;top:-5px;border-radius:4px 0 0 0}
.jz-copy{max-width:470px;rotate:-2deg}
.jz-copy h2{font-size:clamp(36px,3.3vw,52px);line-height:1;margin:0}
.jz-copy h2 .jw{--jw-size:.92em}
.jz-copy .sub{margin-top:14px}
.jz-stage{position:relative;width:min(560px,100%);aspect-ratio:1/1.05;container-type:inline-size}
.jz-stage .fw-say{font-size:clamp(14px,4cqi,21px)}

/* ---------- hero: deco around the stage, all behind the bread ---------- */
.hero-stage .tilt{z-index:1}
.hero-deco{position:absolute;inset:0;pointer-events:none}
.hero-deco .deco{z-index:0}
.hero-deco .fw-say{z-index:2}
.hd-ohayo{width:34%;right:-2%;top:-15%;--r:8}
.hd-gem{width:11%;right:36%;top:-10%;--r:-14}
.hd-stars{width:15%;left:-13%;bottom:12%;--r:-8}
.hd-bow{width:22%;left:-7%;bottom:-6%;--r:-18}
.hd-fw{width:30%;right:-9%;bottom:-13%;--r:6}
.hd-say{right:19%;bottom:-11%;--tx:80%;rotate:-5deg}

/* ---------- home screen: two quiet pieces ---------- */
.fly-copy{position:relative}
.fd-hearts{width:clamp(56px,6vw,84px);right:-4%;top:-26%;--r:12}
.fd-star{width:clamp(36px,3.6vw,52px);left:-9%;bottom:-18%;--r:-10}

/* ---------- every photo becomes a sticker ---------- */
.sd-bow{width:17%;left:33%;top:0;z-index:2;--r:22}
.sd-fw{width:26%;left:1%;bottom:2%;z-index:2;--r:-6}
.sd-say{left:0;bottom:27%;--tx:24%;rotate:-6deg}

/* ---------- section frame shared by the new three ---------- */
.puri,.gel,.book{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;
  padding-block:clamp(70px,11vh,130px) clamp(40px,8vh,90px)}

/* ---------- purikura (mirrored: stage left, copy right) ---------- */
.puri-copy{grid-column:2;grid-row:1;justify-self:start}
.puri-stage{grid-column:1;grid-row:1;justify-self:end}
.puri-stage figure{position:absolute;margin:0;background:#fff;box-shadow:var(--lift)}
.puri-stage figure img{width:100%;height:auto}
.puri-before{left:0;top:4%;width:38%;padding:2cqi 2cqi 0;border-radius:2cqi;rotate:-8deg}
.puri-before img{aspect-ratio:4/5;object-fit:cover;border-radius:1cqi}
.puri-before figcaption{font:400 4.2cqi/1 var(--f-hand);color:#8C8BA6;text-align:center;padding:1.6cqi 0 2.2cqi;letter-spacing:.04em}
.puri-print{right:3%;top:7%;width:57%;z-index:1;padding:2.4cqi;border-radius:2.6cqi;rotate:-4deg}
/* the print has thin black bars at its edges: crop them */
.puri-print img{aspect-ratio:734/912;object-fit:cover;border:1.2cqi solid #FF9CCB;border-radius:1.6cqi}
.puri-graffiti{position:absolute;right:9%;top:13%;z-index:2;margin:0;font:400 8cqi/1 var(--f-hand);color:#fff;rotate:-9deg;white-space:nowrap;
  paint-order:stroke fill;-webkit-text-stroke:.11em var(--pink);letter-spacing:.02em;filter:drop-shadow(0 2px 0 var(--pink))}
.pd-moreta{width:44%;right:-4%;top:64%;z-index:3;--r:-7}
.pd-star{width:12%;right:2%;top:-2%;z-index:2;--r:12}
.pd-gem{width:11%;left:40%;bottom:3%;z-index:2;--r:-12}
.pd-fw{width:28%;left:2%;bottom:1%;z-index:3;--r:-5}
.pd-say{left:3%;bottom:30%;z-index:4;--tx:30%;rotate:-6deg}

/* ---------- gel letters (copy left, stage right) ---------- */
.gel-copy{grid-column:1;grid-row:1 / span 2;justify-self:end}
.gel-stage{grid-column:2;grid-row:1;justify-self:start}
.gel-stage{aspect-ratio:1/.94}
.gel-toast{position:absolute;left:11%;top:5%;width:80%}
.gd-daisuki{width:64%;left:19%;top:21%;z-index:2;--r:5}
.gd-fw{width:40%;left:31%;top:42%;z-index:2;--r:-3}
.gd-saikyo{width:42%;right:3%;top:63%;z-index:3;--r:-8}
.gd-phone{width:14%;left:-1%;top:50%;z-index:3;--r:-12}
.gd-pet{width:19%;right:0;top:0;z-index:3;--r:10}
.gd-gem{width:13%;left:6%;top:4%;z-index:3;--r:-14}
.gel-row{grid-column:2;grid-row:2;justify-self:start;width:min(560px,100%);display:flex;align-items:center;justify-content:center;gap:2%;margin-top:-6px}
.gel-row .deco{position:static;width:31%}
.gel-row .deco:nth-child(2){translate:0 10px}

/* ---------- sticker book (copy above, card centered) ---------- */
.book{grid-template-columns:minmax(0,1fr);justify-items:center;gap:34px}
.book-copy{text-align:center;rotate:-1.5deg;max-width:none}
.book-copy .lt{justify-content:center}
.book-stage{position:relative;width:min(540px,100%);container-type:inline-size}
.book-card{position:relative;background:#FFF2F7;border-radius:26px;padding:7cqi 6cqi 13cqi 15cqi;rotate:-2deg;
  box-shadow:inset 0 0 0 clamp(6px,1.6cqi,10px) #fff,0 30px 50px -20px rgb(8 6 50 / .6),0 6px 12px -4px rgb(8 6 50 / .3)}
/* six ring holes down the left edge */
.book-card::before{content:"";position:absolute;left:4.5cqi;top:7%;bottom:7%;width:5.2cqi;
  background:radial-gradient(circle closest-side,var(--blue) 92%,#0000) 50% 0/100% calc(100%/6) repeat-y}
.book-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqi 3.5cqi}
.book-grid li{position:relative;aspect-ratio:1;min-width:0;rotate:calc(var(--r)*1deg)}
.book-grid .deco{inset:0;rotate:none;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgb(120 40 80 / .22))}
.bd-bow{width:22%;right:-6%;top:-6%;--r:18}
.bd-gel{width:52%;right:-9%;bottom:-6%;--r:-6}
.book-note{position:absolute;margin:0;right:calc(100% + 4%);top:56%;white-space:nowrap;font:400 clamp(18px,1.7vw,24px)/1.4 var(--f-hand);color:#fff;rotate:-8deg;text-align:center;letter-spacing:.02em}
.book-note::after{content:"";display:block;width:2.6em;height:1.2em;margin:.2em auto 0 60%;border-top:2px solid #fff;border-radius:50% 50% 0 0;rotate:18deg}

/* ---------- end ---------- */
.end{position:relative}
/* #wm's box is 394px tall with the art centered in it: center on the art */
.end-deco{position:absolute;left:50%;top:calc(clamp(80px,14vh,160px) + 197px);width:min(78vw,620px);aspect-ratio:1497/394;translate:-50% -50%;pointer-events:none;z-index:2}
.ed-fw{width:27%;right:calc(100% + 2%);bottom:-8%;--r:-8}
.ed-gel{width:32%;left:calc(100% + 1%);top:34%;--r:9}

/* ---------- laptops ---------- */
@media (max-width:1180px){
  .book-note{right:calc(100% - 2%);top:auto;bottom:-4%;z-index:3}
  .book-note::after{display:none}
}
/* ---------- phones ---------- */
@media (max-width:860px){
  .hero-stage{margin-bottom:34px}
  .hd-ohayo{width:44%;right:auto;left:-52%;top:auto;bottom:-1%;--r:-8}
  .hd-gem{width:13%;right:auto;left:-6%;top:-2%}
  .hd-stars{display:none}
  .hd-bow{width:22%;left:auto;right:-5%;bottom:auto;top:4%;--r:20}
  .hd-fw{width:33%;right:-2%;bottom:-20%}
  .hd-say{right:30%;bottom:-17%;font-size:14px}
  .fd-hearts{right:4%;top:-30%;width:52px}
  .fd-star{display:none}
  .jz-copy{justify-self:start;max-width:none}
  .jz-copy h2{font-size:30px}
  .puri,.gel{grid-template-columns:1fr;gap:28px;padding-block:80px 30px}
  .puri-copy,.gel-copy{grid-column:1;grid-row:1}
  .puri-stage,.gel-stage{grid-column:1;grid-row:2;width:100%;justify-self:center}
  .gel-row{grid-column:1;grid-row:3;width:100%;margin-top:0}
  .book{padding-block:80px 30px;gap:28px;justify-items:start}
  .book-copy{text-align:left;rotate:-2deg}
  .book-copy .lt{justify-content:flex-start}
  .book-stage{width:100%;padding-top:44px}
  .bd-gel{width:48%;right:-3%;bottom:-5%}
  .bd-bow{right:-3%}
  .pd-moreta{right:-1%}
  .book-note{left:auto;right:16%;top:0;bottom:auto;width:auto;white-space:nowrap;font-size:18px;rotate:-4deg}
  .book-note::after{display:none}
  .ed-fw{width:30%;right:auto;left:-6%;bottom:auto;top:-110%}
  .ed-gel{width:40%;left:auto;right:-4%;top:96%}
}

/* subs break only at the <wbr> phrase marks and punctuation, so each joke keeps its own line */
.sub{word-break:keep-all}

/* ---------- Fuwapan's name ---------- */
.fw-tag{position:absolute;margin:0;z-index:2;background:#fff;color:var(--blue);font:400 15px/1 var(--f-hand);letter-spacing:.06em;padding:.4em .7em .45em;
  border-radius:8px;rotate:8deg;white-space:nowrap;pointer-events:none;box-shadow:0 0 0 2px #FFC2DE,0 6px 10px -5px rgb(8 6 50 / .5)}
.hd-tag{right:-6%;bottom:-22%}
.book-intro{margin:12px 0 0;font:400 clamp(17px,1.4vw,20px)/1.4 var(--f-hand);color:#fff;letter-spacing:.02em;word-break:keep-all}
@media (max-width:860px){.hd-tag{right:1%;bottom:-27%;font-size:12px}}