
/* ============================================================
   GRAND ROUTE MOSAIC V3
   Completely isolated from SPECIAL ROUTE / MEMORY ROLL.
   ============================================================ */

body.secret-mosaic-v3-open{
  overflow:hidden!important;
}

.secret-mosaic-v3-overlay{
  position:fixed;
  inset:0;
  z-index:14000;
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .38s ease, visibility .38s ease;
  isolation:isolate;
}

.secret-mosaic-v3-overlay.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.secret-mosaic-v3-backdrop{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 50% 46%,rgba(146,91,155,.24),transparent 42%),
    radial-gradient(circle at 50% 50%,#1a1022 0%,#0d0812 68%,#07040a 100%);
}

.secret-mosaic-v3-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,#000,transparent 75%);
  opacity:.35;
}

.secret-mosaic-v3-shell{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.secret-mosaic-v3-kicker{
  position:absolute;
  left:50%;
  top:10px;
  z-index:6;
  transform:translateX(-50%);
  color:#f3c5e3;
  font-size:clamp(12px,1.15vw,17px);
  font-weight:900;
  letter-spacing:.32em;
  white-space:nowrap;
  text-shadow:0 0 18px rgba(243,184,224,.36);
}

.secret-mosaic-v3-stage{
  position:absolute;
  left:clamp(14px,1.7vw,28px);
  right:clamp(14px,1.7vw,28px);
  top:44px;
  bottom:82px;
  overflow:hidden;
  border:1px solid rgba(255,225,246,.20);
  border-radius:clamp(18px,1.7vw,30px);
  background:
    radial-gradient(circle at 50% 44%,rgba(244,205,235,.06),transparent 36%),
    rgba(12,8,17,.52);
  box-shadow:
    inset 0 0 80px rgba(243,194,229,.025),
    0 20px 70px rgba(0,0,0,.38);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.secret-mosaic-v3-canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  user-select:none;
}

.secret-mosaic-v3-petal-frame{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  opacity:0;
  transform:scale(.992);
  transform-origin:center;
  transition:
    opacity 1.15s ease,
    transform 1.35s cubic-bezier(.22,.72,.2,1);
  pointer-events:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.secret-mosaic-v3-overlay.is-frame-visible
.secret-mosaic-v3-petal-frame{
  opacity:.86;
  transform:scale(1);
}

.secret-mosaic-v3-light{
  position:absolute;
  left:50%;
  top:50%;
  width:min(64vw,820px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.16) 0%,
      rgba(247,186,228,.10) 20%,
      rgba(199,178,255,.07) 42%,
      transparent 70%);
  filter:blur(26px);
  transition:opacity .7s ease;
}

.secret-mosaic-v3-overlay.is-complete .secret-mosaic-v3-light{
  opacity:1;
  animation:secretMosaicV3Glow 2.2s ease-in-out infinite alternate;
}

.secret-mosaic-v3-message{
  position:absolute;
  left:50%;
  bottom:83px;
  z-index:7;
  transform:translate(-50%,0);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:90vw;
  text-align:center;
  opacity:1;
  transition:opacity .55s ease, transform .55s ease;
  text-shadow:0 2px 18px rgba(0,0,0,.78);
}

.secret-mosaic-v3-message.is-hidden{
  opacity:0;
  transform:translate(-50%,10px);
  pointer-events:none;
}

.secret-mosaic-v3-message strong{
  color:#fff8fd;
  font-size:clamp(17px,2vw,29px);
  font-weight:700;
}

.secret-mosaic-v3-message span{
  color:#edb9dc;
  font-size:clamp(11px,1.15vw,14px);
  font-weight:900;
  letter-spacing:.16em;
}

.secret-mosaic-v3-actions{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:8;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  width:min(560px,calc(100vw - 28px));
}

.secret-mosaic-v3-actions > button{
  flex:1 1 0;
  min-width:0;
}

@keyframes secretMosaicV3Glow{
  from{transform:translate(-50%,-50%) scale(.94);filter:blur(28px)}
  to{transform:translate(-50%,-50%) scale(1.07);filter:blur(20px)}
}

@media(max-width:700px){
  .secret-mosaic-v3-kicker{top:8px}
  .secret-mosaic-v3-stage{
    left:8px;
    right:8px;
    top:38px;
    bottom:74px;
    border-radius:20px;
  }
  .secret-mosaic-v3-message{
    bottom:74px;
  }
  .secret-mosaic-v3-actions{
    bottom:10px;
    width:calc(100vw - 16px);
  }
}


.secret-mosaic-v3-thankyou{
  position:absolute;
  z-index:140;
  left:50%;
  top:50%;
  width:min(92vw,980px);
  transform:translate(-50%,-44%) scale(.96);
  opacity:0;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  font-family:"Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  font-size:clamp(24px,4.8vw,64px);
  font-weight:700;
  letter-spacing:.16em;
  text-shadow:
    0 0 10px rgba(255,255,255,.96),
    0 0 24px rgba(247,166,217,.82),
    0 0 42px rgba(190,173,255,.72);
  pointer-events:none;
}

.secret-mosaic-v3-dream-transition.is-active .secret-mosaic-v3-thankyou{
  animation:dreamThankYou 2.45s 5.15s cubic-bezier(.22,.7,.2,1) both;
}

@keyframes dreamThankYou{
  0%{opacity:0;transform:translate(-50%,-36%) scale(.94);filter:blur(10px)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.015);filter:blur(4px)}
}

@media(max-width:620px){
  .secret-mosaic-v3-thankyou{
    width:94vw;
    font-size:clamp(20px,7.2vw,34px);
    letter-spacing:.08em;
  }
}

@media(prefers-reduced-motion:reduce){
  .secret-mosaic-v3-light{animation:none!important}
  .secret-mosaic-v3-petal-frame{transition:none!important}
}






/* ============================================================
   GRAND ROUTE anniversary PNG overlay
   ============================================================ */

.secret-mosaic-v3-message{
  top:auto!important;
  bottom:clamp(58px,7.0vh,88px)!important;
  width:min(94vw,1640px)!important;
  max-width:none!important;
  overflow:visible!important;
  pointer-events:none;
}

.secret-mosaic-v3-anniversary-image{
  display:block;
  width:min(91vw,1580px);
  height:auto;
  max-height:38vh;
  object-fit:contain;
  margin:0 auto;
  opacity:0;
  transform:translateY(18px) scale(.975);
  filter:
    drop-shadow(0 0 8px rgba(255,183,229,.35))
    drop-shadow(0 0 24px rgba(255,126,206,.20));
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.secret-mosaic-v3-message:not(.is-hidden)
.secret-mosaic-v3-anniversary-image{
  animation:secretMosaicV3AnniversaryPngIn 1.05s
    cubic-bezier(.16,.78,.22,1) .10s forwards;
}

@keyframes secretMosaicV3AnniversaryPngIn{
  0%{
    opacity:0;
    transform:translateY(22px) scale(.965);
    filter:
      drop-shadow(0 0 0 rgba(255,183,229,0))
      brightness(.9);
  }
  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.008);
    filter:
      drop-shadow(0 0 15px rgba(255,183,229,.52))
      drop-shadow(0 0 34px rgba(255,126,206,.26))
      brightness(1.08);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:
      drop-shadow(0 0 9px rgba(255,183,229,.36))
      drop-shadow(0 0 25px rgba(255,126,206,.20))
      brightness(1);
  }
}

@media(max-width:700px){
  .secret-mosaic-v3-message{
    bottom:70px!important;
    width:98vw!important;
  }

  .secret-mosaic-v3-anniversary-image{
    width:97vw;
    max-height:31vh;
  }
}


.secret-mosaic-v3-thankyou{
  position:absolute;
  z-index:140;
  left:50%;
  top:50%;
  width:min(92vw,980px);
  transform:translate(-50%,-44%) scale(.96);
  opacity:0;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  font-family:"Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  font-size:clamp(24px,4.8vw,64px);
  font-weight:700;
  letter-spacing:.16em;
  text-shadow:
    0 0 10px rgba(255,255,255,.96),
    0 0 24px rgba(247,166,217,.82),
    0 0 42px rgba(190,173,255,.72);
  pointer-events:none;
}

.secret-mosaic-v3-dream-transition.is-active .secret-mosaic-v3-thankyou{
  animation:dreamThankYou 2.45s 5.15s cubic-bezier(.22,.7,.2,1) both;
}

@keyframes dreamThankYou{
  0%{opacity:0;transform:translate(-50%,-36%) scale(.94);filter:blur(10px)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.015);filter:blur(4px)}
}

@media(max-width:620px){
  .secret-mosaic-v3-thankyou{
    width:94vw;
    font-size:clamp(20px,7.2vw,34px);
    letter-spacing:.08em;
  }
}

@media(prefers-reduced-motion:reduce){
  .secret-mosaic-v3-anniversary-image{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}


/* GRAND ROUTE: mosaic/original toggle */
.secret-mosaic-v3-actions{
  width:min(720px,calc(100vw - 28px));
}

.secret-mosaic-v3-overlay.is-original-view
.secret-mosaic-v3-message{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.secret-mosaic-v3-overlay.is-original-view
.secret-mosaic-v3-light{
  opacity:.55;
}

@media(max-width:700px){
  .secret-mosaic-v3-actions{
    width:calc(100vw - 16px);
    gap:7px;
  }

  .secret-mosaic-v3-actions > button{
    font-size:11px;
    padding-left:6px;
    padding-right:6px;
  }
}

/* GRAND ROUTE: owner-only gift entrance */
.secret-mosaic-v3-owner-gift{
  position:absolute;
  right:clamp(12px,1.5vw,24px);
  bottom:12px;
  z-index:10;
  display:block;
  width:clamp(150px,13vw,215px);
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 8px 18px rgba(12,6,28,.28));
  transition:transform .18s ease,filter .18s ease,opacity .18s ease;
}

.secret-mosaic-v3-owner-gift:hover{
  transform:translateY(-3px) scale(1.015);
  filter:drop-shadow(0 12px 24px rgba(18,8,36,.36)) brightness(1.04);
}

.secret-mosaic-v3-owner-gift:focus-visible{
  outline:2px solid rgba(255,236,249,.95);
  outline-offset:3px;
  border-radius:18px;
}

.secret-mosaic-v3-owner-gift-image{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Keep the gift entrance and the standard GRAND ROUTE actions in separate
   footer lanes whenever the viewport gets narrow. */
@media(min-width:1180px){
  .secret-mosaic-v3-actions{
    width:min(620px,calc(100vw - 430px));
  }
}

@media(max-width:1179px){
  .secret-mosaic-v3-stage{
    bottom:132px;
  }

  .secret-mosaic-v3-message{
    bottom:132px!important;
  }

  .secret-mosaic-v3-original-hint{
    bottom:132px;
  }

  .secret-mosaic-v3-owner-gift{
    right:10px;
    bottom:72px;
    width:clamp(142px,22vw,190px);
  }
}

/* GRAND ROUTE: owner-only gift page */
.secret-mosaic-v3-owner-gift-page{
  position:absolute;
  inset:0;
  z-index:80;
  display:none;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 12%,rgba(255,174,219,.18),transparent 34%),
    radial-gradient(circle at 84% 18%,rgba(169,180,255,.16),transparent 32%),
    linear-gradient(180deg,rgba(20,13,34,.97),rgba(20,22,43,.985));
  color:#fff;
}

.secret-mosaic-v3-overlay.is-owner-gift-page .secret-mosaic-v3-owner-gift-page{
  display:block;
}

.secret-mosaic-v3-overlay.is-owner-gift-page .secret-mosaic-v3-stage,
.secret-mosaic-v3-overlay.is-owner-gift-page .secret-mosaic-v3-message,
.secret-mosaic-v3-overlay.is-owner-gift-page .secret-mosaic-v3-original-hint,
.secret-mosaic-v3-overlay.is-owner-gift-page .secret-mosaic-v3-actions,
.secret-mosaic-v3-overlay.is-owner-gift-page .secret-mosaic-v3-owner-gift,
.secret-mosaic-v3-overlay.is-owner-gift-page > .secret-mosaic-v3-shell > .secret-mosaic-v3-kicker{
  visibility:hidden!important;
  pointer-events:none!important;
}

.secret-mosaic-v3-owner-gift-back{
  position:absolute;
  top:clamp(12px,2vh,22px);
  left:clamp(12px,2vw,26px);
  z-index:3;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(14,10,28,.42);
  color:#f9eefa;
  font:700 12px/1.2 "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  cursor:pointer;
}

.secret-mosaic-v3-owner-gift-scroll{
  width:100%;
  height:100%;
  overflow:auto;
  padding:clamp(62px,8vh,86px) clamp(18px,5vw,84px) 74px;
  scrollbar-width:thin;
}


.secret-mosaic-v3-owner-gift-copy{
  width:min(760px,100%);
  margin:0 auto;
  text-align:center;
}

.secret-mosaic-v3-owner-gift-kicker{
  margin:0 0 5px;
  color:#e8b7da;
  font:800 11px/1.2 "Zen Maru Gothic","Yu Gothic",sans-serif;
  letter-spacing:.22em;
}

.secret-mosaic-v3-owner-gift-copy h2{
  margin:0;
  color:#fff8fc;
  font:800 clamp(26px,3vw,42px)/1.25 "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  text-shadow:0 0 24px rgba(242,161,214,.26);
}

.secret-mosaic-v3-owner-gift-lead{
  margin:14px auto 20px;
  color:#f1e8f4;
  font:500 clamp(13px,1.2vw,16px)/1.9 "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  white-space:pre-line;
}

.secret-mosaic-v3-owner-gift-lead strong{color:#fff4d9}

.secret-mosaic-v3-owner-gift-note{
  padding:18px clamp(16px,3vw,28px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.045);
  text-align:left;
}

.secret-mosaic-v3-owner-gift-note h3{
  margin:0 0 8px;
  color:#ffe5f3;
  font:800 15px/1.5 "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
}

.secret-mosaic-v3-owner-gift-note p{
  margin:7px 0 0;
  color:#dcd3e5;
  font:500 13px/1.75 "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
}

.secret-mosaic-v3-owner-gift-note strong{
  color:#f8eef9;
  font-weight:800;
}

.secret-mosaic-v3-owner-gift-contact-note{
  margin-top:14px!important;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#bfb4c9!important;
  font-size:11px!important;
  line-height:1.7!important;
}

.secret-mosaic-v3-owner-gift-file{
  margin:16px 0 0;
  color:#cfc4d9;
  font:600 11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  overflow-wrap:anywhere;
}

.secret-mosaic-v3-owner-gift-file span{
  display:inline-block;
  margin-right:8px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#edbadb;
  font-family:"Zen Maru Gothic","Yu Gothic",sans-serif;
}

.secret-mosaic-v3-owner-gift-bottom{
  width:min(760px,100%);
  margin:30px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
}

.secret-mosaic-v3-owner-gift-status{
  min-height:1.7em;
  margin:0 0 9px;
  color:#dacfe2;
  font:700 12px/1.6 "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
}
.secret-mosaic-v3-owner-gift-status.is-success{color:#fff0bc}
.secret-mosaic-v3-owner-gift-status.is-error{color:#ffc9df}

.secret-mosaic-v3-owner-gift-primary{
  display:block;
  width:min(560px,100%);
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 13px 28px rgba(22,8,42,.28));
  transition:transform .18s ease,filter .18s ease,opacity .18s ease;
}

.secret-mosaic-v3-owner-gift-primary:hover{
  transform:translateY(-3px) scale(1.012);
  filter:drop-shadow(0 17px 34px rgba(24,8,46,.34)) brightness(1.035);
}

.secret-mosaic-v3-owner-gift-primary:focus-visible{
  outline:2px solid rgba(255,238,250,.96);
  outline-offset:4px;
  border-radius:24px;
}

.secret-mosaic-v3-owner-gift-primary[aria-busy="true"]{
  cursor:wait;
  opacity:.62;
  pointer-events:none;
}

.secret-mosaic-v3-owner-gift-primary-image{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.secret-mosaic-v3-owner-gift-contact{
  position:absolute;
  right:clamp(14px,2vw,28px);
  bottom:clamp(12px,2vh,22px);
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 13px;
  border:1px solid rgba(255,223,243,.28);
  border-radius:999px;
  background:rgba(28,20,45,.72);
  color:#f5eaf3;
  text-decoration:none;
  font:700 11px/1.2 "Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  letter-spacing:.03em;
  box-shadow:0 7px 20px rgba(7,3,18,.22), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease;
}

.secret-mosaic-v3-owner-gift-contact:hover{
  transform:translateY(-2px);
  border-color:rgba(255,205,238,.48);
  background:rgba(47,30,69,.86);
  color:#fff8fc;
}

.secret-mosaic-v3-owner-gift-contact:focus-visible{
  outline:2px solid rgba(255,238,250,.95);
  outline-offset:3px;
}

.secret-mosaic-v3-owner-gift-contact-icon{
  width:18px;
  height:18px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:700px){
  .secret-mosaic-v3-stage{
    bottom:136px;
  }

  .secret-mosaic-v3-message{
    bottom:136px!important;
  }

  .secret-mosaic-v3-owner-gift{
    right:8px;
    bottom:76px;
    width:clamp(132px,40vw,172px);
  }

  .secret-mosaic-v3-owner-gift-scroll{padding:58px 14px 82px}
  .secret-mosaic-v3-owner-gift-note{padding:15px 14px}
  .secret-mosaic-v3-owner-gift-primary{width:min(520px,96vw)}
  .secret-mosaic-v3-owner-gift-contact{
    right:12px;
    bottom:12px;
    min-height:36px;
    padding:7px 11px;
    font-size:10px;
  }
}


/* ============================================================
   GRAND ROUTE / Original illustration CTA
   ============================================================ */

.secret-mosaic-v3-original-hint{
  position:absolute;
  left:50%;
  bottom:76px;
  z-index:9;
  transform:translate(-50%,0);
  color:#fff5fb;
  font-size:clamp(12px,1vw,15px);
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
  text-shadow:
    0 2px 12px rgba(0,0,0,.65),
    0 0 16px rgba(255,181,229,.35);
  opacity:1;
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}

.secret-mosaic-v3-original-hint.is-hidden{
  opacity:0;
  transform:translate(-50%,8px);
}

.secret-mosaic-v3-original-cta{
  position:relative;
  isolation:isolate;
  overflow:visible!important;
}

.secret-mosaic-v3-original-cta.is-guiding{
  color:#2c1933!important;
  background:
    linear-gradient(
      135deg,
      rgba(255,215,239,.98),
      rgba(230,201,255,.98)
    )!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.32),
    0 0 18px rgba(255,176,226,.45),
    0 0 34px rgba(204,164,255,.24)!important;
  animation:
    secretMosaicV3OriginalButtonFloat 1.1s cubic-bezier(.2,.8,.2,1) both,
    secretMosaicV3OriginalButtonPulse 2.8s 1.1s ease-in-out infinite;
}

.secret-mosaic-v3-original-cta.is-guiding::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  border-radius:inherit;
  overflow:hidden;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.9) 48%,
      rgba(255,255,255,.42) 52%,
      transparent 62%,
      transparent 100%
    );
  transform:translateX(-135%);
  animation:
    secretMosaicV3OriginalButtonShine 2.9s 1.4s ease-in-out infinite;
  pointer-events:none;
}

.secret-mosaic-v3-original-cta.is-guiding::after{
  content:"✦";
  position:absolute;
  right:-10px;
  top:-13px;
  color:#fff;
  font-size:18px;
  text-shadow:
    0 0 6px rgba(255,255,255,.95),
    0 0 13px rgba(255,164,224,.95),
    0 0 22px rgba(197,157,255,.65);
  animation:
    secretMosaicV3OriginalStar 2.6s 1.2s ease-in-out infinite;
  pointer-events:none;
}

.secret-mosaic-v3-actions.is-original-guiding
> :not(.secret-mosaic-v3-original-cta){
  opacity:.56;
  filter:saturate(.72);
  transition:opacity .35s ease, filter .35s ease;
}

@keyframes secretMosaicV3OriginalButtonFloat{
  0%{
    opacity:0;
    transform:translateY(12px) scale(.97);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes secretMosaicV3OriginalButtonPulse{
  0%,100%{
    transform:translateY(0) scale(1);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.32),
      0 0 16px rgba(255,176,226,.38),
      0 0 28px rgba(204,164,255,.20);
  }
  50%{
    transform:translateY(-1px) scale(1.018);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.42),
      0 0 24px rgba(255,176,226,.58),
      0 0 40px rgba(204,164,255,.30);
  }
}

@keyframes secretMosaicV3OriginalButtonShine{
  0%,58%{
    transform:translateX(-135%);
    opacity:0;
  }
  66%{
    opacity:1;
  }
  82%{
    transform:translateX(135%);
    opacity:0;
  }
  100%{
    transform:translateX(135%);
    opacity:0;
  }
}

@keyframes secretMosaicV3OriginalStar{
  0%,68%,100%{
    opacity:.18;
    transform:scale(.68) rotate(0deg);
  }
  74%{
    opacity:1;
    transform:scale(1.18) rotate(18deg);
  }
  82%{
    opacity:.32;
    transform:scale(.82) rotate(36deg);
  }
}

@media(max-width:700px){
  .secret-mosaic-v3-original-hint{
    bottom:70px;
    max-width:92vw;
    font-size:12px;
  }
}


.secret-mosaic-v3-thankyou{
  position:absolute;
  z-index:140;
  left:50%;
  top:50%;
  width:min(92vw,980px);
  transform:translate(-50%,-44%) scale(.96);
  opacity:0;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  font-family:"Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  font-size:clamp(24px,4.8vw,64px);
  font-weight:700;
  letter-spacing:.16em;
  text-shadow:
    0 0 10px rgba(255,255,255,.96),
    0 0 24px rgba(247,166,217,.82),
    0 0 42px rgba(190,173,255,.72);
  pointer-events:none;
}

.secret-mosaic-v3-dream-transition.is-active .secret-mosaic-v3-thankyou{
  animation:dreamThankYou 2.45s 5.15s cubic-bezier(.22,.7,.2,1) both;
}

@keyframes dreamThankYou{
  0%{opacity:0;transform:translate(-50%,-36%) scale(.94);filter:blur(10px)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.015);filter:blur(4px)}
}

@media(max-width:620px){
  .secret-mosaic-v3-thankyou{
    width:94vw;
    font-size:clamp(20px,7.2vw,34px);
    letter-spacing:.08em;
  }
}

@media(prefers-reduced-motion:reduce){
  .secret-mosaic-v3-original-cta.is-guiding{
    animation:none!important;
  }

  .secret-mosaic-v3-original-cta.is-guiding::before,
  .secret-mosaic-v3-original-cta.is-guiding::after{
    animation:none!important;
  }
}


/* ============================================================
   GRAND ROUTE -> "夢の続きへ" dream transition
   ============================================================ */

.secret-mosaic-v3-dream-exit{
  position:relative;
}

.secret-mosaic-v3-dream-transition{
  position:absolute;
  inset:0;
  z-index:100;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:rgba(255,245,252,0);
}

.secret-mosaic-v3-dream-transition.is-active{
  opacity:1;
  visibility:visible;
}

.secret-mosaic-v3-dream-cloud{
  position:absolute;
  border-radius:50%;
  opacity:0;
  filter:blur(24px);
  background:
    radial-gradient(circle at 42% 42%,
      rgba(255,255,255,.98) 0 22%,
      rgba(255,225,244,.94) 38%,
      rgba(221,211,255,.78) 58%,
      rgba(190,218,255,.30) 72%,
      transparent 76%);
  mix-blend-mode:screen;
  will-change:transform,opacity;
}

.secret-mosaic-v3-dream-transition.is-active .cloud-a{
  width:70vw;height:70vw;
  left:-34vw;top:-24vw;
  animation:dreamCloudA 4.8s cubic-bezier(.22,.7,.2,1) forwards;
}

.secret-mosaic-v3-dream-transition.is-active .cloud-b{
  width:76vw;height:76vw;
  right:-38vw;top:-18vw;
  animation:dreamCloudB 5.0s .18s cubic-bezier(.22,.7,.2,1) forwards;
}

.secret-mosaic-v3-dream-transition.is-active .cloud-c{
  width:82vw;height:82vw;
  left:-40vw;bottom:-42vw;
  animation:dreamCloudC 5.15s .32s cubic-bezier(.22,.7,.2,1) forwards;
}

.secret-mosaic-v3-dream-transition.is-active .cloud-d{
  width:80vw;height:80vw;
  right:-40vw;bottom:-40vw;
  animation:dreamCloudD 5.3s .46s cubic-bezier(.22,.7,.2,1) forwards;
}

.secret-mosaic-v3-dream-transition.is-active .cloud-e{
  width:58vw;height:58vw;
  left:21vw;top:22vh;
  transform:scale(.25);
  animation:dreamCloudCenter 4.6s .70s ease-in forwards;
}

.secret-mosaic-v3-dream-core{
  position:absolute;
  left:50%;
  top:50%;
  width:22vmin;
  height:22vmin;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0 22%,
      rgba(255,230,247,.92) 34%,
      rgba(217,208,255,.62) 53%,
      transparent 72%);
  filter:blur(10px);
}

.secret-mosaic-v3-dream-transition.is-active .secret-mosaic-v3-dream-core{
  animation:dreamCoreBloom 4.25s 1.05s ease-in forwards;
}

.secret-mosaic-v3-dream-stars{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.7);
  width:100%;
  text-align:center;
  color:#fff;
  font-size:clamp(20px,4vw,56px);
  letter-spacing:.3em;
  opacity:0;
  text-shadow:
    0 0 8px #fff,
    0 0 18px rgba(255,180,230,.9),
    0 0 30px rgba(185,173,255,.7);
}

.secret-mosaic-v3-dream-transition.is-active .secret-mosaic-v3-dream-stars{
  animation:dreamStars 3.4s 1.10s ease-out forwards;
}

.secret-mosaic-v3-overlay.is-dream-exiting
.secret-mosaic-v3-shell > :not(.secret-mosaic-v3-dream-transition){
  animation:dreamSceneSink 3.5s ease-in forwards;
}

@keyframes dreamCloudA{
  0%{opacity:0;transform:translate(-18%,-16%) scale(.58)}
  25%{opacity:.72}
  100%{opacity:1;transform:translate(54%,46%) scale(1.42)}
}
@keyframes dreamCloudB{
  0%{opacity:0;transform:translate(18%,-18%) scale(.55)}
  25%{opacity:.74}
  100%{opacity:1;transform:translate(-52%,45%) scale(1.46)}
}
@keyframes dreamCloudC{
  0%{opacity:0;transform:translate(-20%,18%) scale(.56)}
  25%{opacity:.74}
  100%{opacity:1;transform:translate(50%,-50%) scale(1.44)}
}
@keyframes dreamCloudD{
  0%{opacity:0;transform:translate(20%,20%) scale(.56)}
  25%{opacity:.76}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.46)}
}
@keyframes dreamCloudCenter{
  0%{opacity:0;transform:scale(.25)}
  30%{opacity:.72}
  100%{opacity:1;transform:scale(2.45)}
}
@keyframes dreamCoreBloom{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  30%{opacity:.75}
  100%{opacity:1;transform:translate(-50%,-50%) scale(8)}
}
@keyframes dreamStars{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}
  35%{opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
@keyframes dreamSceneSink{
  0%{opacity:1;filter:blur(0) brightness(1);transform:scale(1)}
  100%{opacity:.08;filter:blur(10px) brightness(1.35);transform:scale(1.035)}
}


.secret-mosaic-v3-thankyou{
  position:absolute;
  z-index:140;
  left:50%;
  top:50%;
  width:min(92vw,980px);
  transform:translate(-50%,-44%) scale(.96);
  opacity:0;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  font-family:"Zen Maru Gothic","Yu Gothic","Meiryo",sans-serif;
  font-size:clamp(24px,4.8vw,64px);
  font-weight:700;
  letter-spacing:.16em;
  text-shadow:
    0 0 10px rgba(255,255,255,.96),
    0 0 24px rgba(247,166,217,.82),
    0 0 42px rgba(190,173,255,.72);
  pointer-events:none;
}

.secret-mosaic-v3-dream-transition.is-active .secret-mosaic-v3-thankyou{
  animation:dreamThankYou 2.45s 5.15s cubic-bezier(.22,.7,.2,1) both;
}

@keyframes dreamThankYou{
  0%{opacity:0;transform:translate(-50%,-36%) scale(.94);filter:blur(10px)}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,-56%) scale(1.015);filter:blur(4px)}
}

@media(max-width:620px){
  .secret-mosaic-v3-thankyou{
    width:94vw;
    font-size:clamp(20px,7.2vw,34px);
    letter-spacing:.08em;
  }
}

@media(prefers-reduced-motion:reduce){
  .secret-mosaic-v3-dream-transition.is-active{
    background:#fff6fc;
  }
  .secret-mosaic-v3-dream-transition.is-active *{
    animation:none!important;
  }
}

/* Keep the GRAND ROUTE action row centered while the dream exit starts.
   The generic dreamSceneSink keyframes animate `transform`, which otherwise
   replaces the row's required translateX(-50%) and makes all buttons jump
   to the right immediately after pressing 「夢の続きへ」. */
.secret-mosaic-v3-overlay.is-dream-exiting .secret-mosaic-v3-actions{
  animation:dreamActionsSink 3.5s ease-in forwards;
}

@keyframes dreamActionsSink{
  0%{
    opacity:1;
    filter:blur(0) brightness(1);
    transform:translateX(-50%) scale(1);
  }
  100%{
    opacity:.08;
    filter:blur(10px) brightness(1.35);
    transform:translateX(-50%) scale(1.035);
  }
}


/* GRAND ROUTE dream exit: freeze the action row at its exact screen position.
   A fixed visual snapshot is created before the transition starts, so no
   parent transform/layout animation can move the buttons sideways. */
.secret-mosaic-v3-actions-snapshot{
  display:flex!important;
  gap:10px;
  box-sizing:border-box;
  animation:dreamActionsSnapshotFade 3.5s ease-in forwards!important;
  transform:none!important;
  transform-origin:center center;
  will-change:opacity,filter;
}

.secret-mosaic-v3-actions-snapshot > button{
  flex:1 1 0;
  min-width:0;
  pointer-events:none!important;
}

@keyframes dreamActionsSnapshotFade{
  0%{opacity:1;filter:blur(0) brightness(1)}
  100%{opacity:.08;filter:blur(10px) brightness(1.35)}
}

@media(max-width:700px){
  .secret-mosaic-v3-actions-snapshot{gap:7px}
}
