/* Piku Print Club, the site. Shared flat app-screen components: print card, strip, tape, segmented pills, tile rows, family bar, toast, hold ring. */
/* ============ paper objects: prints, photos, strips, tape ============ */
.ph{position:relative;background:var(--pbg,var(--teal));overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:url(/assets/brand/halftone-paper.svg) right top/cover no-repeat;scale:-1 1;opacity:.5;pointer-events:none}
.b-blue{--pbg:var(--blue)}.b-teal{--pbg:var(--teal)}.b-mint{--pbg:var(--mint)}.b-pink{--pbg:var(--pink)}.b-coral{--pbg:var(--coral)}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--card);border-radius:3.5%/2.5%;padding:3.5% 3.5% 0;aspect-ratio:1/1.38;box-shadow:var(--bx-print)}
.pph{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;border-radius:1.7%/1.3%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.13)}
.chin{position:relative;display:block;flex:1}
.stamp{position:absolute;left:5.5%;top:50%;height:27%;width:auto;translate:0 -50%;transform:skewX(-6deg);fill:none;stroke:#212121;stroke-opacity:.92;stroke-width:1.5;stroke-linecap:round}
.rig{position:absolute;left:9%;bottom:0;width:82%;aspect-ratio:904/745}
.rig>svg,.rig .mascot{position:absolute;inset:0;width:100%;height:100%;display:block}
.mascot{isolation:isolate;overflow:visible}
/* a laughing pose (.rig.o, from the booth): the real mouth steps out and the open mouth shows */
.mascot .om{display:none}
.rig.o .mascot .om{display:inline}
.rig.o .mascot{--mouth-ink:0}   /* the horns stand above the 904 x 745 box; the picture's frame crops them */
.rig .lk{position:absolute;display:block;pointer-events:none;max-width:none}
.tape{position:absolute;z-index:3;width:30%;pointer-events:none;height:auto}
.tape-top{left:50%;top:-3.5%;margin-left:-15%;rotate:-6deg}

.bstrip{position:absolute;aspect-ratio:1370/4750}
.bstrip .w{position:absolute;left:13.504%;width:72.993%;aspect-ratio:1;display:block}
.bstrip .w1{top:5.158%}.bstrip .w2{top:27.158%}.bstrip .w3{top:49.158%}.bstrip .w4{top:71.158%}
.bstrip .w>img{position:absolute;left:5%;bottom:-8%;width:92%;height:auto}
.bstrip .ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;max-width:none}
.bstrip .w .rig{left:8%;width:84%}
.develop,.flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5;display:block}
.develop{background:#140F0D}
.flash{background:#fff}
@keyframes flashpop{0%,22%{opacity:1}100%{opacity:0}}

/* ============ the flat app screen frame (no bezel, no notch) ============ */
.screen{position:relative;width:min(100%,384px);margin:0 auto;padding:10px;background:#fff;border-radius:36px;box-shadow:0 1px 1px rgba(30,42,36,.3),0 5px 12px rgba(30,42,36,.18),0 26px 46px rgba(20,30,50,.3)}
.screen .tape{width:26%;top:-24px}
.screen .tape-l{left:9%;rotate:-8deg}
.screen .tape-r{right:9%;rotate:7deg}
.scr{container-type:inline-size;position:relative;aspect-ratio:360/700;border-radius:27px;overflow:hidden;background:var(--paper);isolation:isolate}
.scr .in{--fl:1;--ffl:1;--u:calc(100cqw/360);position:absolute;inset:0;padding-top:calc(18*var(--u));display:flex;flex-direction:column;font-size:calc(15*var(--u));line-height:1.2;user-select:none;-webkit-user-select:none}
.scr button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .34s var(--spring-press)}
.scr button:not(:disabled):active{transform:translateY(1px) scale(.96)}
.scr img{-webkit-user-drag:none}

/* ============ shared screen pieces: segmented modes, toast, play badge, hold ring, prints on a wall ============ */
.modes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:calc(52*var(--u));margin:calc(10*var(--u)) calc(14*var(--u));padding:calc(3*var(--u));border-radius:999px;background:rgba(30,42,36,.07)}
.mthumb{position:absolute;left:calc(3*var(--u));top:calc(3*var(--u));bottom:calc(3*var(--u));width:calc((100% - 6*var(--u))/3);border-radius:999px;background:var(--ink);transform:translateX(calc(var(--i,1)*100%));transition:transform .4s var(--spring-pop)}
.modes button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1*var(--u));padding:0;border:0;background:none;font-size:calc(12*var(--u));font-weight:700;color:var(--ink78);transition:color .2s,transform .34s var(--spring-press)}
.modes button .ic{width:calc(17*var(--u));height:calc(17*var(--u))}
.modes button[aria-checked=true]{color:var(--paper);font-weight:800}
@keyframes cnt{from{scale:.4;opacity:0}30%{opacity:1}to{scale:1;opacity:1}}
.roll{position:absolute;left:50%;bottom:calc(16*var(--u));translate:-50% 0;z-index:5;width:max-content;max-width:90%;text-align:center;background:#fff;border-radius:calc(16*var(--u));padding:calc(9*var(--u)) calc(18*var(--u));box-shadow:0 calc(4*var(--u)) calc(14*var(--u)) rgba(30,42,36,.3);animation:cnt .6s var(--spring-pop) both}
.roll b{display:block;font-weight:900;font-size:calc(18*var(--u))}
.roll span{display:block;font-weight:700;font-size:calc(14*var(--u));color:var(--ink78)}
.roll[hidden]{display:none}
.play{position:absolute;right:calc(8*var(--u));bottom:calc(8*var(--u));z-index:3;width:calc(30*var(--u));height:calc(30*var(--u));border-radius:50%;background:rgba(30,42,36,.6);color:#fff;display:grid;place-items:center}
.play .ic{width:calc(15*var(--u));height:calc(15*var(--u));fill:#fff;stroke:none;translate:calc(1*var(--u)) 0}
@keyframes glide{from{translate:0 calc(60*var(--u));scale:.86;opacity:0}to{translate:0;scale:1;opacity:1}}
@keyframes fly{to{translate:0 calc(-700*var(--u));scale:.15;opacity:.25}}
@keyframes btnin{from{opacity:0;scale:.85;translate:0 calc(16*var(--u))}to{opacity:1;scale:1;translate:0}}
.rb-ring,.lb .rb-ring{position:absolute;inset:calc(1*var(--u));width:calc(100% - 2*var(--u));height:calc(100% - 2*var(--u));rotate:-90deg;fill:none;stroke:#E0475E;stroke-width:4;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;transition:stroke-dashoffset .2s ease-out}
.holding .rb-ring{stroke-dashoffset:0;transition:stroke-dashoffset .6s linear}
.holding{scale:.92}
.ws{position:absolute;height:auto;translate:-50% -50%;rotate:var(--r,0deg);z-index:2}
.pph .bust{position:absolute;inset:0;width:100%;height:100%;display:block}   /* an avatar printed as a photo (assets/avatars/photo): head and shoulders, its own backdrop */
.bstrip .w>img.bust{inset:0;left:0;bottom:auto;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.c-comic{filter:contrast(1.45) saturate(1.7) brightness(.98)}
.c-pop{filter:url(#f-pop)}
.c-bw{filter:grayscale(1)}
.c-old{filter:sepia(.92) contrast(.95)}
.c-heat{filter:url(#f-heat)}
.c-xray{filter:grayscale(1) invert(1)}
.c-dream{filter:saturate(1.15) brightness(1.06) blur(.7px) drop-shadow(0 0 6px rgba(255,255,255,.7))}
.c-toast{filter:saturate(1.45) contrast(1.08) sepia(.28) hue-rotate(-8deg)}
.mirror .rig{scale:-1 1}

/* ============ panel pieces shared by FX and Decorate ============ */
.pn-bar{position:relative;flex:none;height:calc(52*var(--u));padding:calc(6*var(--u)) calc(18*var(--u)) 0;display:flex;align-items:center;justify-content:space-between}
.pn-pill{height:calc(42*var(--u));padding:0 calc(22*var(--u));border:0;border-radius:999px;background:var(--teal);color:var(--ink);font-weight:800;font-size:calc(17*var(--u))}
.pn-bar b{position:absolute;left:50%;top:calc(6*var(--u));height:calc(42*var(--u));display:grid;align-items:center;translate:-50% 0;font-weight:800;font-size:calc(19*var(--u))}
.pn-plain{padding:0;border:0;background:none;font-weight:700;font-size:calc(17*var(--u));color:var(--ink72)}
.pn-panel{flex:none;height:calc(158*var(--u));background:#fff;border-radius:calc(24*var(--u)) calc(24*var(--u)) 0 0;box-shadow:0 calc(-3*var(--u)) calc(20*var(--u)) rgba(30,42,36,.1);padding-top:calc(6*var(--u));display:flex;flex-direction:column;gap:calc(10*var(--u));overflow:hidden;position:relative;z-index:2}
.pn-panel.one,.pn-panel.mid{justify-content:center;padding-top:0}
.pn-tabs{flex:none;display:flex;height:calc(40*var(--u));margin:0 calc(16*var(--u));position:relative;box-shadow:0 1px 0 rgba(30,42,36,.08)}
.pn-tabs button{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:calc(5*var(--u));padding:0;border:0;background:none;font-size:calc(15*var(--u));font-weight:700;color:var(--ink72)}
.pn-tabs button[aria-selected=true]{font-weight:800;color:var(--ink)}
.pn-tabs button[aria-selected=true]::before{content:"";position:absolute;left:50%;bottom:0;width:calc(56*var(--u));height:calc(3*var(--u));margin-left:calc(-28*var(--u));border-radius:9px;background:var(--ink)}
.has-dot::after{content:"";display:inline-block;width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:var(--ink);margin-left:calc(5*var(--u))}
.pn-tiles{flex:none;display:flex;gap:calc(8*var(--u));height:calc(88*var(--u));padding:calc(2*var(--u)) calc(16*var(--u));align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pn-tiles::-webkit-scrollbar{display:none}
.tile{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4*var(--u));width:calc(76*var(--u));height:calc(84*var(--u));padding:0 calc(2*var(--u));border:0;border-radius:calc(14*var(--u));background:var(--tile);font-size:calc(13*var(--u));font-weight:800;color:var(--ink);white-space:nowrap}
.tile[aria-pressed=true]{background:var(--sel);box-shadow:inset 0 0 0 calc(2.5*var(--u)) var(--ink)}
.tile .tp{display:grid;place-items:center;width:calc(64*var(--u));height:calc(42*var(--u));overflow:hidden}
.tile .tp img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.tile .tp .ic{width:calc(26*var(--u));height:calc(26*var(--u));color:var(--ink72)}
.tile .tp svg.mini{width:calc(56*var(--u));height:calc(42*var(--u));overflow:visible}
.tile .tn{display:block;max-width:100%;overflow:hidden;text-overflow:clip}
.pn-hint{flex:none;text-align:center;font-size:calc(13*var(--u));font-weight:700;color:var(--ink72);margin-top:calc(-2*var(--u))}
.pn-nav{flex:none;display:flex;gap:calc(6*var(--u));padding:calc(6*var(--u)) calc(12*var(--u)) calc(14*var(--u));background:#fff;box-shadow:0 -1px 0 rgba(30,42,36,.07);position:relative;z-index:3}
.pn-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--u));height:calc(54*var(--u));padding:0;border:0;border-radius:calc(16*var(--u));background:none;font-size:calc(13*var(--u));font-weight:700;color:var(--ink72)}
.pn-nav button .ic{width:calc(23*var(--u));height:calc(23*var(--u))}
.pn-nav button[aria-selected=true]{background:var(--sel);font-weight:800;color:var(--ink)}
.pn-nav button span{display:flex;align-items:center}

/* ============ screens: reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .roll{animation-duration:.01s!important;animation-delay:0s!important}
  .mthumb{transition-duration:.01s}
}

/* Minimum sizes inside the screens (the 44px tap boxes, 11 to 14px words) are written in real pixels, which made the app preview look chunky on a phone, where it is only
   about 270px wide. --fl is how much of the 360px design width the screen really is (1 at 360 or more), so those floors shrink with it; words keep a lower limit
   (--ffl, never below .75) so they stay readable. Browsers without tan() and atan2() keep 1 (nothing changes for them). */
@supports (width:calc(1px * tan(atan2(1px, 1px)))){
  .scr .in{--fl:min(1,tan(atan2(100cqw,360px)));--ffl:max(.75,min(1,tan(atan2(100cqw,360px))))}
}