/* 中華航空 AI 拍貼機 — kiosk stage 1080x1920 (design px), scaled to the screen with --s */
:root{--s:1;--ease:cubic-bezier(.2,.8,.2,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--ink:#3f3d63;
  --font:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#c8c6ee;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#frame{position:fixed;inset:0;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1080px;height:1920px;transform:translate(-50%,-50%) scale(var(--s));transform-origin:center;overflow:hidden;background:#cfd0f2;font-family:var(--font);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{visibility:hidden}

/* screens */
.screen{position:absolute;inset:0;overflow:hidden}
.screen.leave{animation:leave .5s ease both;pointer-events:none;z-index:0}
.screen.live{z-index:1}
@keyframes leave{to{opacity:0}}
.bg{position:absolute;left:0;top:0;width:1080px;height:1920px;animation:bg-in .7s ease both,bg-drift 26s ease-in-out .7s infinite alternate;transform-origin:60% 40%}
@keyframes bg-in{from{opacity:0}}
@keyframes bg-drift{to{transform:scale(1.045) translate(-8px,10px)}}

/* placed artwork */
.a{position:absolute;display:block;pointer-events:none;max-width:none}
img.a{object-fit:fill}
.mv{position:absolute;pointer-events:none;object-fit:fill}

/* entrance choreography — every element waits for .enter, then runs with its own --d */
.screen:not(.enter) [class*="in-"]{opacity:0}
.screen.enter [class*="in-"]{animation-duration:.85s;animation-timing-function:var(--ease);animation-fill-mode:both;animation-delay:var(--d,0s)}
.screen.enter .in-fade{animation-name:a-fade}
.screen.enter .in-rise{animation-name:a-rise}
.screen.enter .in-wipe{animation-name:a-wipe;animation-duration:1.1s}
.screen.enter .in-rule,.screen.enter .in-arrow{animation-name:a-rule;animation-duration:1s}
.screen.enter .in-num{animation-name:a-num;animation-duration:1.1s}
.screen.enter .in-bracket-l{animation-name:a-bl;animation-duration:1.2s}
.screen.enter .in-bracket-r{animation-name:a-br;animation-duration:1.2s}
.screen.enter .in-capsule{animation-name:a-capsule;animation-duration:1.6s}
.screen.enter .in-pop{animation-name:a-pop;animation-timing-function:var(--ease-back);animation-duration:.7s}
.screen.enter .in-card{animation-name:a-card;animation-duration:.9s}
.screen.enter .in-window{animation-name:a-window;animation-duration:1s}
.screen.enter .in-polaroid{animation-name:a-polaroid;animation-duration:1.3s;--d:.45s}
.screen.enter .in-plane{animation-name:a-plane;animation-duration:2.4s}
@keyframes a-fade{from{opacity:0}}
@keyframes a-rise{from{opacity:0;transform:translateY(28px);filter:blur(6px)}}
@keyframes a-wipe{from{opacity:.2;clip-path:inset(0 100% 0 0);transform:translateX(-14px)}to{clip-path:inset(0 0 0 0)}}
@keyframes a-rule{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes a-num{from{opacity:0;transform:translate(-36px,10px) skewX(-6deg)}}
@keyframes a-bl{from{opacity:0;transform:translateX(26px) scaleY(.62)}}
@keyframes a-br{from{opacity:0;transform:translateX(-26px) scaleY(.62)}}
@keyframes a-capsule{from{opacity:0;transform:scale(1.035);clip-path:inset(46% 0 46% 0 round 471px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes a-pop{0%{opacity:0;transform:scale(.6)}}
@keyframes a-card{from{opacity:0;transform:translateY(46px) scale(.96)}}
@keyframes a-window{from{opacity:0;transform:scale(.94);filter:blur(4px)}}
@keyframes a-polaroid{0%{opacity:0;transform:translateY(90px) rotate(-5deg)}60%{opacity:1}100%{transform:none}}
@keyframes a-plane{from{opacity:0;transform:translate(260px,90px) scale(.7)}}

/* buttons: artwork pills with a masked glint and gentle breathing on the primary action */
button{font:inherit;color:inherit}
.btn{position:absolute;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;outline:none}
.btn img{display:block;width:100%;height:100%;pointer-events:none;transition:transform .18s var(--ease),filter .18s}
.btn:active img{transform:scale(.94);filter:brightness(1.08)}
.btn:focus-visible{outline:4px solid rgba(255,255,255,.8);outline-offset:6px;border-radius:60px}
.btn .shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--mask) center/100% 100% no-repeat;mask:var(--mask) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 48%,rgba(255,255,255,0) 64%) no-repeat;background-size:240% 100%;background-position:160% 0;opacity:0}
.btn.primary img{animation:breathe 3.4s ease-in-out 1.8s infinite}
.btn.primary .shine{animation:shine 4.2s ease-in-out 2.2s infinite}
@keyframes breathe{50%{transform:scale(1.035)}}
@keyframes shine{0%{background-position:160% 0;opacity:1}38%{background-position:-70% 0;opacity:1}39%,100%{opacity:0}}
.btn.disabled{pointer-events:none}
.btn.disabled img{opacity:.42;filter:saturate(.5);animation:none}
.btn.disabled .shine{animation:none}
.btn.nudge img{animation:nudge .6s var(--ease-back),breathe 3.4s ease-in-out 1.2s infinite}
@keyframes nudge{40%{transform:scale(1.09)}}

/* home */
.shimmer-787{-webkit-mask:linear-gradient(100deg,#000 40%,rgba(0,0,0,.55) 50%,#000 60%) 0 0/300% 100%;mask:linear-gradient(100deg,#000 40%,rgba(0,0,0,.55) 50%,#000 60%) 0 0/300% 100%}
.screen.enter .shimmer-787{animation:a-rise .85s var(--ease) var(--d) both,mask-sweep 5s ease-in-out 2.4s infinite}
@keyframes mask-sweep{0%{-webkit-mask-position:100% 0;mask-position:100% 0}45%,100%{-webkit-mask-position:0 0;mask-position:0 0}}

/* scene cards */
.cards{position:absolute;inset:0;pointer-events:none}
.card{position:absolute;width:369px;height:369px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;border-radius:34px;outline:none}
.card .lift{position:absolute;inset:0;transition:transform .45s var(--ease),opacity .35s,filter .35s}
.card .ca{position:absolute;pointer-events:none}
.card .glass{left:0;top:0;width:369px;height:369px;transition:filter .35s}
/* The artboard crops carry a hard-edged rounded mask 2.5 px inside the window; clip just inside it so big screens get a smooth corner (2026-11-05) */
.card .photo{position:absolute;overflow:hidden;clip-path:inset(3px round 24px);background:#d9d8f0}
.card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card .photo img.place,.card.on .photo img.place{position:absolute;right:14px;top:9px;width:66px;height:auto;object-fit:contain;transition:opacity .25s;transform:none}
.card.on .photo img.place{opacity:0}
.card .lift::after{content:"";position:absolute;inset:3px;border-radius:32px;border:3px solid #fff;opacity:0;transform:scale(.97);transition:opacity .3s,transform .45s var(--ease);box-shadow:0 18px 40px rgba(78,66,160,.22),inset 0 0 0 1px rgba(255,255,255,.4)}
.card .tick{position:absolute;left:300px;top:8px;width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(70,60,140,.25);transform:scale(0) rotate(-40deg);transition:transform .45s var(--ease-back)}
.card .tick svg{width:30px;height:30px;fill:none;stroke:#545194;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s .18s ease}
.card:active .lift{transform:scale(.97)}
.card.on .lift{transform:translateY(-8px)}
.card.on .lift::after{opacity:1;transform:none}
.card.on .glass{filter:brightness(1.22) saturate(1.05)}
.card.on .photo img{transform:scale(1.06)}
.card.on .tick{transform:none}
.card.on .tick svg{stroke-dashoffset:0}
.cards.has-choice .card:not(.on) .lift{opacity:.66;filter:saturate(.75)}

/* camera window (airplane-window radius from the artwork) */
.window{position:absolute;border-radius:145px;overflow:hidden;background:rgba(98,92,140,.28);box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 24px 60px rgba(70,60,140,.16);isolation:isolate}
.window video,.window #shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.window video{transform:scaleX(-1)}
.window .win-dim{position:absolute;opacity:0;transition:opacity .5s;pointer-events:none}
.screen[data-cam="pending"] .win-dim,.screen[data-cam="error"] .win-dim{opacity:1}
.screen.counting .win-dim{opacity:.34}
.cam-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;text-align:center;z-index:2}
.cam-state p{margin:0;font-size:36px;letter-spacing:.32em;font-weight:500;text-indent:.32em}
.cam-state small{font-size:24px;letter-spacing:.18em;opacity:.85}
.text-btn{border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.14);color:#fff;border-radius:60px;padding:16px 38px;font-size:26px;letter-spacing:.2em;cursor:pointer;pointer-events:auto}
.dots::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:dots 1.4s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"．"}50%{content:"．．"}75%{content:"．．．"}}
/* scene hint above the camera window (shootTip): one outlined pill like the 重拍 / 出發 buttons, spaced lettering like the
   face caption below the window; the turn arrow sits inside the pill on the side it points to */
.shoot-tip{left:0;top:376px;width:1080px;margin:0;display:flex;justify-content:center}
.shoot-tip .pill{display:flex;align-items:center;gap:14px;height:66px;padding:0 40px;border-radius:999px;border:2px solid rgba(84,81,148,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16));box-shadow:0 8px 24px rgba(70,60,140,.10);color:#4f4c88}
.shoot-tip .pill>span{font-size:30px;font-weight:500;line-height:1;letter-spacing:.28em;margin-right:-.28em;white-space:nowrap}
.shoot-tip svg{width:34px;height:34px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.shoot-tip.turn-left svg{animation:tip-left 1.6s ease-in-out infinite}
.shoot-tip.turn-right svg{transform:scaleX(-1);animation:tip-right 1.6s ease-in-out infinite}
@keyframes tip-left{50%{translate:-6px 0}}
@keyframes tip-right{50%{translate:6px 0}}
.screen.counting #shoot{opacity:0;pointer-events:none;transition:opacity .3s}
.screen.counting .debug-upload{display:none}
/* Static 3-2-1. The design export count-N.webp is the 20 %-white ghost layer and vanished over the live camera (2026-10-20),
   so this uses the AE source digits (count-N-solid). 2026-11-05: at the clip's ~60 % they still got lost on a bright picture,
   so they are near-solid with a deeper shadow; with reduced motion the animation ended at once on opacity 0, so they just
   appear. Own layer above the window: iOS Safari can paint a playing <video> over later siblings. */
.count-fallback{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;transform:translateZ(0)}
.count-fallback .cf{opacity:0;filter:drop-shadow(0 6px 20px rgba(47,42,82,.75))}
.count-fallback .cf.show{animation:cf-pop 1s var(--ease) both}
@keyframes cf-pop{0%{opacity:0;transform:scale(1.2)}17%{opacity:1;transform:scale(1.08)}32%{opacity:.96;transform:none}80%{opacity:.96;transform:none}100%{opacity:0;transform:translateY(-28px) scale(.8)}}
.flash{position:absolute;border-radius:145px;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:flash .42s ease-out}
@keyframes flash{15%{opacity:.9}}
.debug-upload{position:absolute;left:60px;bottom:60px;border:2px dashed rgba(63,61,99,.5);background:rgba(255,255,255,.45);border-radius:40px;padding:14px 28px;font-size:22px;letter-spacing:.15em;color:var(--ink);cursor:pointer}

/* transit */
.rotator img{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s}
.rotator img.on{opacity:1;transform:none;filter:none}
.rotator img.off{opacity:0;transform:translateY(-22px);filter:blur(4px)}
.globe-spin{animation:a-fade .8s both,spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* polaroid */
.polaroid{position:absolute;transform-origin:0 0;scale:var(--k,1)}
.polaroid > *{position:absolute}
.polaroid .pc-card{left:0;top:0;width:100%;height:100%}
.polaroid .pc-photo{overflow:hidden;background:#cfd0e6}
.polaroid .pc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.develop .pc-photo img{animation:develop 2.2s ease-out .7s both}
@keyframes develop{0%{filter:brightness(1.9) saturate(.1) blur(8px)}55%{filter:brightness(1.15) saturate(.8) blur(1px)}100%{filter:none}}
.points-qr,.share-qr{position:absolute;display:grid;place-items:center;background:#fff;border-radius:8px}
.points-qr .qr,.share-qr .qr{width:100%;height:100%;image-rendering:pixelated}
.points-qr span{font-size:28px;line-height:1.6;letter-spacing:.2em;text-align:center;color:#8a88b4}
.share-qr span,.share-qr .text-btn{font-size:24px;letter-spacing:.15em;color:#6c6a98}
.share-qr .text-btn{border-color:#9c9ac6;background:#f2f1fb;color:#55528f;line-height:1.6;padding:14px 24px}

/* modal (cut8) */
.modal{position:absolute;inset:0;z-index:5}
.modal .scrim{position:absolute;inset:0;background:rgba(48,44,88,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .45s}
.modal .m-card{transform:translateY(40px) scale(.95);opacity:0;transition:transform .6s var(--ease),opacity .45s}
.modal .m-in{opacity:0;translate:0 24px;transition:opacity .55s var(--ease) var(--d,0s),translate .55s var(--ease) var(--d,0s)}
.modal.open .scrim{opacity:1}
.modal.open .m-card{transform:none;opacity:1}
.modal.open .m-in{opacity:1;translate:0 0}
.modal.closing{transition:opacity .35s;opacity:0}

/* toast */
#toast{position:fixed;left:50%;bottom:6vh;transform:translate(-50%,30px);max-width:86vw;padding:1.1em 2em;border-radius:999px;background:rgba(255,255,255,.88);color:#3f3d63;font:500 clamp(14px,2.2vh,40px)/1.4 var(--font);letter-spacing:.12em;box-shadow:0 10px 40px rgba(60,50,130,.22);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--ease);z-index:10;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .count-fallback .cf.show{animation:none;opacity:.96}
}

/* Phones (2026-10-20). The kiosk is a 1080 px-wide Chrome screen; anything narrower is someone opening the UAT on a
   phone. iOS Safari repaints blur filters and backdrop blur every frame of an animation, which made the whole UI
   stutter, so on phones the blur-based effects become plain fades and the slow background drift is dropped. */
@media (max-width:900px){
  @keyframes a-rise{from{opacity:0;transform:translateY(28px)}}
  @keyframes a-window{from{opacity:0;transform:scale(.94)}}
  @keyframes develop{0%{opacity:.35;filter:brightness(1.6) saturate(.2)}55%{opacity:1;filter:brightness(1.1) saturate(.85)}100%{filter:none}}
  .bg{animation:bg-in .7s ease both}
  .rotator img,.rotator img.off{filter:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .modal .scrim{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(48,44,88,.66)}
  #toast{-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn.primary .shine{animation:none}
}

/* Static-fallback globe: the plane flies the same 6 s path as the globe-loop clip (design/kiosk-1013/canvas/globe.html, flat
   ending). Transform/opacity only, so it is cheap on phones where the alpha video is not used. */
.orbit-fly{transform-origin:55.7% 44.7%;filter:brightness(0) invert(1) drop-shadow(0 1px 1px rgba(70,60,120,.35));animation:orbit-fly 6s linear infinite}
@keyframes orbit-fly{
  0%{transform:translate(-297.9px,115.3px) rotate(21.7deg) scale(1.000);opacity:0.00}
  2%{transform:translate(-292.3px,114.0px) rotate(21.0deg) scale(1.000);opacity:0.12}
  4%{transform:translate(-286.1px,112.4px) rotate(20.1deg) scale(1.000);opacity:0.41}
  6%{transform:translate(-279.4px,110.6px) rotate(19.1deg) scale(1.000);opacity:0.73}
  8%{transform:translate(-272.1px,108.5px) rotate(18.1deg) scale(1.000);opacity:0.96}
  10%{transform:translate(-264.2px,106.1px) rotate(17.1deg) scale(1.000);opacity:1.00}
  12%{transform:translate(-255.7px,103.3px) rotate(16.2deg) scale(1.000);opacity:1.00}
  14%{transform:translate(-246.5px,100.2px) rotate(15.3deg) scale(1.000);opacity:1.00}
  16%{transform:translate(-236.7px,96.7px) rotate(14.4deg) scale(1.000);opacity:1.00}
  18%{transform:translate(-226.2px,92.7px) rotate(13.5deg) scale(1.000);opacity:1.00}
  20%{transform:translate(-215.1px,88.3px) rotate(12.6deg) scale(1.000);opacity:1.00}
  22%{transform:translate(-203.4px,83.5px) rotate(11.8deg) scale(1.000);opacity:1.00}
  24%{transform:translate(-191.1px,78.2px) rotate(11.0deg) scale(1.000);opacity:1.00}
  26%{transform:translate(-178.2px,72.4px) rotate(10.3deg) scale(1.000);opacity:1.00}
  28%{transform:translate(-164.7px,66.2px) rotate(9.8deg) scale(1.000);opacity:1.00}
  30%{transform:translate(-150.7px,59.5px) rotate(9.6deg) scale(1.000);opacity:1.00}
  32%{transform:translate(-136.3px,52.3px) rotate(9.6deg) scale(1.000);opacity:1.00}
  34%{transform:translate(-121.4px,44.7px) rotate(9.6deg) scale(1.000);opacity:1.00}
  36%{transform:translate(-106.3px,36.6px) rotate(9.6deg) scale(1.000);opacity:1.00}
  38%{transform:translate(-90.9px,28.1px) rotate(9.6deg) scale(1.000);opacity:1.00}
  40%{transform:translate(-75.4px,19.2px) rotate(9.6deg) scale(1.000);opacity:1.00}
  42%{transform:translate(-59.8px,10.0px) rotate(9.6deg) scale(1.000);opacity:1.00}
  44%{transform:translate(-44.2px,0.5px) rotate(9.6deg) scale(1.000);opacity:1.00}
  46%{transform:translate(-28.8px,-9.3px) rotate(9.6deg) scale(1.000);opacity:1.00}
  48%{transform:translate(-13.6px,-19.2px) rotate(9.6deg) scale(1.000);opacity:1.00}
  50%{transform:translate(1.2px,-29.4px) rotate(9.6deg) scale(1.000);opacity:1.00}
  52%{transform:translate(15.6px,-39.5px) rotate(9.6deg) scale(1.000);opacity:1.00}
  54%{transform:translate(29.4px,-49.7px) rotate(9.6deg) scale(1.000);opacity:1.00}
  56%{transform:translate(42.5px,-59.9px) rotate(9.6deg) scale(1.000);opacity:1.00}
  58%{transform:translate(54.9px,-69.9px) rotate(9.6deg) scale(1.000);opacity:1.00}
  60%{transform:translate(66.3px,-79.8px) rotate(9.6deg) scale(1.000);opacity:1.00}
  62%{transform:translate(76.8px,-89.4px) rotate(9.6deg) scale(1.000);opacity:1.00}
  64%{transform:translate(86.3px,-98.6px) rotate(9.6deg) scale(1.000);opacity:1.00}
  65%{transform:translate(90.7px,-103.1px) rotate(9.6deg) scale(1.000);opacity:1.00}
  66%{transform:translate(96.2px,-105.7px) rotate(9.6deg) scale(0.999);opacity:1.00}
  68%{transform:translate(107.4px,-110.9px) rotate(9.6deg) scale(0.988);opacity:0.96}
  70%{transform:translate(118.6px,-116.2px) rotate(9.6deg) scale(0.969);opacity:0.90}
  72%{transform:translate(129.7px,-121.4px) rotate(9.6deg) scale(0.943);opacity:0.81}
  74%{transform:translate(140.9px,-126.6px) rotate(9.6deg) scale(0.911);opacity:0.70}
  76%{transform:translate(152.0px,-131.8px) rotate(9.6deg) scale(0.877);opacity:0.59}
  78%{transform:translate(163.2px,-137.0px) rotate(9.6deg) scale(0.841);opacity:0.47}
  80%{transform:translate(174.3px,-142.2px) rotate(9.6deg) scale(0.806);opacity:0.35}
  82%{transform:translate(185.5px,-147.4px) rotate(9.6deg) scale(0.772);opacity:0.24}
  84%{transform:translate(196.7px,-152.6px) rotate(9.6deg) scale(0.744);opacity:0.15}
  86%{transform:translate(207.8px,-157.8px) rotate(9.6deg) scale(0.721);opacity:0.07}
  88%{transform:translate(219.0px,-163.0px) rotate(9.6deg) scale(0.705);opacity:0.02}
  90%{transform:translate(90.7px,-103.1px) rotate(9.6deg) scale(0.700);opacity:0.00}
  92%{transform:translate(90.7px,-103.1px) rotate(9.6deg) scale(0.700);opacity:0.00}
  94%{transform:translate(90.7px,-103.1px) rotate(9.6deg) scale(0.700);opacity:0.00}
  96%{transform:translate(90.7px,-103.1px) rotate(9.6deg) scale(0.700);opacity:0.00}
  98%{transform:translate(90.7px,-103.1px) rotate(9.6deg) scale(0.700);opacity:0.00}
  100%{transform:translate(-297.9px,115.3px) rotate(21.7deg) scale(1.000);opacity:0.00}
}

/* Back button, top-right (2026-10-30): an invisible tap zone covering the top-right corner (staff/user taps the
   corner to go one step back); the label stays for screen readers. Disabled while the countdown runs. */
.back-btn{left:auto;right:0;top:0;width:260px;height:200px;padding:0;margin:0;border:0;background:transparent;opacity:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;outline:none}
.screen.counting .back-btn{pointer-events:none}

/* Hidden redo (2026-11-05): an invisible corner on the result page opens the box editor (redo.js) */
.redo-btn{left:auto;right:0;top:auto;bottom:0;width:160px;height:160px;padding:0;margin:0;border:0;background:transparent;opacity:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;outline:none}

/* Back-to-home confirmation (2026-10-30) */
.confirm-home .ch-card{position:absolute;left:150px;top:720px;width:780px;padding:72px 60px 60px;box-sizing:border-box;border-radius:56px;background:linear-gradient(180deg,#fbfaff,#ecebfa);box-shadow:0 30px 80px rgba(40,36,90,.28);text-align:center;color:var(--ink)}
.confirm-home .ch-title{margin:0;font-size:46px;font-weight:600;letter-spacing:.16em}
.confirm-home .ch-sub{margin:22px 0 0;font-size:28px;letter-spacing:.14em;color:#6c6a98}
.confirm-home .ch-actions{display:flex;gap:36px;justify-content:center;margin-top:60px}
.confirm-home .ch-btn{width:280px;height:96px;border-radius:999px;border:2px solid rgba(84,81,148,.6);background:#fff;color:#4f4c88;font-size:34px;font-weight:600;letter-spacing:.4em;padding-left:.4em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.confirm-home .ch-btn.primary{background:linear-gradient(180deg,#6d69b8,#4f4c97);border-color:transparent;color:#fff}
.redo .ch-card{left:24px;width:1032px;padding:40px 32px 36px}
.redo .ch-title{font-size:40px}
.redo .ch-sub{margin:14px 0 26px;font-size:26px}
.redo-canvas{display:block;margin:0 auto;border-radius:20px;touch-action:none;cursor:crosshair}
.redo .ch-actions{gap:16px;margin-top:30px}
.redo-genders{display:flex;justify-content:center;gap:28px;min-height:72px;margin-top:18px}
.redo-gender{display:inline-flex;align-items:center;gap:8px;font-size:30px;font-weight:600;color:#4f4c88}
.redo-gender button{width:72px;height:72px;border-radius:50%;border:2px solid rgba(84,81,148,.6);background:#fff;color:#4f4c88;font:600 30px var(--font);cursor:pointer}
.redo-gender button.on{background:#5e5aa8;border-color:transparent;color:#fff}
.redo .ch-btn{width:226px;height:88px;font-size:30px;letter-spacing:.2em;padding-left:.2em}
.redo .ch-btn.disabled{opacity:.4;pointer-events:none}
.confirm-home .ch-btn:active{transform:scale(.97)}