/* =====================================================================
   v4 — bigger healing words, music & letter buttons, MRT lines,
   temple-door blessing, the welcome letter, tutorial, photo upload
   ===================================================================== */

/* ---------- header: healing words you can actually read ---------- */
.topin { gap: 10px 14px; }
.healing { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: var(--rose-tint); border: 2px solid var(--rose-soft);
    border-radius: 999px; padding: 6px 18px 6px 12px; font: 400 1.18rem/1.3 var(--cute); color: var(--rose); letter-spacing: .04em;
    box-shadow: 0 3px 0 rgba(161, 94, 88, .12); max-width: 560px; }
.healing .leaf { display: inline-block; animation: leaf 3s ease-in-out infinite; }
#healing { transition: opacity .45s; }
@keyframes leaf { 50% { transform: rotate(-14deg) translateY(-2px); } }
.tools { display: flex; gap: 6px; }
.toolbtn { border: 2px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: 800 .86rem var(--sans); cursor: pointer; white-space: nowrap; }
.toolbtn:hover { border-color: var(--rose-soft); }
.toolbtn.on { background: var(--sage); border-color: var(--sage); color: var(--white); animation: notes 1.6s ease-in-out infinite; }
@keyframes notes { 50% { box-shadow: 0 0 0 5px rgba(157, 178, 154, .3); } }

/* ---------- MRT lines ---------- */
.mrtbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: .86rem; }
.mrtbar .line { --lc: #999; border: 2px solid var(--lc); background: var(--white); color: var(--lc); border-radius: 999px; padding: 2px 12px 2px 8px; font: 800 .84rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mrtbar .line::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); }
.mrtbar .line.on { background: var(--lc); color: #fff; }
.mrtbar .line.on::before { background: #fff; }
.mrtbar select { width: auto; margin: 0; padding: 3px 8px; font-size: .84rem; border-radius: 999px; }
.job .meta .mrttag { --lc: #999; background: var(--white); border: 1.5px solid var(--lc); color: var(--ink); }
.mrttag i { font-style: normal; color: #fff; background: var(--lc); border-radius: 4px; padding: 0 4px; font-size: .72rem; font-weight: 800; }

/* ---------- letter templates ---------- */
.writetips { margin-top: 14px; background: var(--mustard-tint); border: 2px dashed var(--mustard-soft); border-radius: 16px; padding: 12px 16px; font-size: .88rem; }
.writetips h3 { font-size: 1.05rem; color: var(--mustard); margin-bottom: 6px; }
.writetips ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
#letterEdit { font: 500 .86rem/1.55 Arial, 'Nunito', sans-serif; }
.mrow.why { background: var(--rose-tint); }
.mrow.why span { font-size: .72rem; line-height: 1.2; color: var(--rose); font-weight: 800; }

/* ---------- splash: blessing + temple doors ---------- */
.splash.blessed .godwrap { animation: blessglow 1s ease-in-out infinite alternate; }
.splash.blessed .godwrap::before { content: ''; position: absolute; inset: -30% -20%; z-index: -1;
    background: repeating-conic-gradient(from 0deg, rgba(246, 220, 160, .55) 0 8deg, transparent 8deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
    animation: rays 6s linear infinite; }
@keyframes blessglow { to { filter: drop-shadow(0 0 22px rgba(246, 220, 160, .95)) brightness(1.06); } }
@keyframes rays { to { transform: rotate(360deg); } }
.doors { position: fixed; inset: 0; z-index: 205; pointer-events: none; perspective: 1400px; display: none; }
.splash.shut .doors, .splash.open .doors { display: block; }
.door { position: absolute; top: 0; bottom: 0; width: 50.5%; background:
        linear-gradient(90deg, transparent 0 8%, rgba(59, 74, 90, .9) 8% 9%, transparent 9% 91%, rgba(59, 74, 90, .9) 91% 92%, transparent 92%),
        repeating-linear-gradient(0deg, transparent 0 46px, rgba(161, 94, 88, .55) 46px 50px),
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(161, 94, 88, .55) 46px 50px),
        var(--rose-soft);
    border: 6px solid var(--ink); box-shadow: inset 0 0 0 10px var(--sage-soft), inset 0 0 0 13px var(--ink);
    transition: transform .8s cubic-bezier(.6, .05, .3, 1); }
.door.l { left: 0; transform: translateX(-102%); transform-origin: left center; }
.door.r { right: 0; transform: translateX(102%); transform-origin: right center; }
.splash.shut .door { transform: none; }
.splash.open .door { transition: transform 1.25s cubic-bezier(.5, 0, .25, 1); }
.splash.open .door.l { transform: rotateY(105deg); }
.splash.open .door.r { transform: rotateY(-105deg); }
.knock { position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; border: 4px solid var(--ink);
    background: radial-gradient(circle, var(--mustard-soft) 0 45%, #C9A55E 46% 60%, var(--mustard-soft) 61%); }
.door.l .knock { right: 26px; } .door.r .knock { left: 26px; }
.halo { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 247, 220, 1) 0, rgba(246, 220, 160, .8) 35%, rgba(246, 220, 160, 0) 70%); transform: scale(0); opacity: 0; }
.splash.open .halo { animation: halo 1.4s ease-out forwards; }
@keyframes halo { 20% { opacity: 1; } 100% { transform: scale(90); opacity: 0; } }
.splash.shut .shrine { transition: opacity .3s .5s; opacity: 0; }
.splash.open { background: transparent; transition: background .3s; }
.splash.open .skip { display: none; }
.skip.music { right: auto; left: 16px; text-decoration: none; background: var(--white); border: 2px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.skip.music.on { background: var(--sage); color: var(--white); border-color: var(--sage); }
.blessrain { position: fixed !important; z-index: 210; }

/* ---------- the welcome letter ---------- */
.lbox { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; background: rgba(59, 74, 90, .35); backdrop-filter: blur(3px); cursor: pointer;
    opacity: 0; transition: opacity .4s; padding: 12px; }
.lbox.show { opacity: 1; }
.lbox.gone { opacity: 0; transition: opacity .5s .1s; }
.lb-wrap { position: relative; width: min(440px, 94vw); height: min(700px, 94vh); perspective: 1200px; transform: scale(.4) translateY(80px); transition: transform .6s cubic-bezier(.2, 1.5, .4, 1); }
.lbox.show .lb-wrap { transform: none; }
.lbox.gone .lb-wrap { transform: translate(38vw, -44vh) scale(.08) rotate(14deg); transition: transform .65s cubic-bezier(.6, 0, .3, 1); }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; }
.env-back { background: #C98E86; border-radius: 10px; border: 3px solid var(--ink); }
.env-front { z-index: 3; height: 170px; background:
        linear-gradient(to top right, #D9A39B 49.6%, transparent 50%) left / 50.2% 100% no-repeat,
        linear-gradient(to top left, #D9A39B 49.6%, transparent 50%) right / 50.2% 100% no-repeat,
        #E3B4AC; border: 3px solid var(--ink); border-top: 0; border-radius: 0 0 10px 10px; clip-path: polygon(0 18%, 50% 62%, 100% 18%, 100% 100%, 0 100%); }
.env-flap { z-index: 4; bottom: 0; height: 200px; transform-origin: top; transition: transform .55s ease, z-index 0s .27s;
    background: linear-gradient(#CF9A92, #C98E86); clip-path: polygon(0 0, 100% 0, 50% 58%); }
.lbox.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.lbox.closing .env-flap { transform: none; z-index: 4; transition: transform .45s ease .7s, z-index 0s .92s; }
.seal { position: absolute; z-index: 5; left: 50%; bottom: 102px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: var(--rose); border: 3px solid var(--ink);
    display: grid; place-items: center; transition: opacity .3s; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.seal svg { width: 26px; height: 26px; fill: var(--mustard-soft); }
.lbox.open .seal { opacity: 0; }
.lbox.closing .seal { opacity: 1; transition: opacity .3s 1s; }
.paper { position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 16px; height: 160px; overflow: hidden; cursor: pointer;
    background: #FFFCF4 url(img/wc-god.webp) center 62% / 80% no-repeat; border-radius: 6px; border: 2.5px solid #D8C3A5;
    box-shadow: inset 0 0 0 7px #FFFCF4, inset 0 0 0 8.5px var(--rose-soft), 0 10px 30px rgba(59, 74, 90, .2);
    padding: 24px 24px 56px; transition: height .75s cubic-bezier(.3, 1.05, .4, 1) .5s, bottom .75s cubic-bezier(.3, 1.05, .4, 1) .5s; }
.paper::before { content: ''; position: absolute; inset: 0; background: rgba(255, 252, 244, .86); z-index: -1; }
.lbox.open .paper { height: calc(100% - 118px); bottom: 108px; }
.lbox.closing .paper { height: 160px; bottom: 16px; transition: height .6s ease, bottom .6s ease; }
.paper .pt { margin: 0 0 10px; text-align: center; font: 400 1.05rem var(--title); color: var(--rose); letter-spacing: .2em; }
.paper .ptext p { margin: 0 0 .7em; font: 400 1rem/1.75 var(--cute); color: var(--ink); }
.paper .ptext p:first-child { font-size: 1.08rem; color: var(--rose); }
.paper .ptext b { color: var(--rose); font-weight: 400; background: linear-gradient(transparent 60%, var(--mustard-tint) 60%); }
.paper .psign { text-align: right; margin: 6px 0 0; font: 400 .98rem var(--cute); color: var(--ink-soft); }
.paper .phint { position: absolute; left: 0; right: 0; bottom: 36px; text-align: center; margin: 0; font-size: .78rem; color: var(--ink-soft); opacity: 0; transition: opacity .4s 1.4s; }
.lbox.open .paper .phint { opacity: 1; animation: blink 2s ease-in-out 2s infinite; }
@keyframes blink { 50% { opacity: .4; } }
.charm { position: absolute; top: 4px; right: 14px; width: 38px; transform-origin: 50% 0; animation: charm 2.6s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .15)); }
@keyframes charm { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }

/* ---------- tutorial ---------- */
.guide { background: var(--card); border: 2.5px solid var(--rose-soft); border-radius: 22px; padding: 16px 18px; margin-bottom: 18px; box-shadow: 0 6px 0 var(--rose-tint); }
.guide.pop { animation: guidepop .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes guidepop { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.guidehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.guidehead h2 { margin: 0; color: var(--rose); font-size: 1.35rem; }
.guidehead small { font-size: .8rem; }
.gsteps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.gsteps li { display: flex; gap: 10px; background: var(--white); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.gsteps li > b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--rose); color: var(--white); display: grid; place-items: center; font-size: .95rem; }
.gsteps h3 { margin: 2px 0 4px; font-size: 1.05rem; }
.gsteps p { margin: 0 0 4px; font-size: .86rem; }
.gsteps em { font-style: normal; font-weight: 800; color: var(--rose); }
.guidefoot { margin: 10px 0 0; font-size: .82rem; }

/* ---------- portfolio photos ---------- */
.howto { background: var(--clay-tint); border-radius: 14px; padding: 10px 14px; font-size: .88rem; margin-bottom: 12px; }
.howto ol { margin: 4px 0 0; padding-left: 1.2em; }
.imgbox { margin-bottom: 8px; }
.imgbox .lbl { display: block; font-size: .86rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.th { position: relative; width: 92px; height: 72px; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); background: var(--paper-2); }
.th.cover { width: 130px; border-color: var(--rose-soft); }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(59, 74, 90, .75); color: #fff; cursor: pointer; line-height: 1; }
.th em { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-size: .68rem; background: var(--rose); color: #fff; border-radius: 6px; padding: 0 5px; }
.addimg { width: 92px; height: 72px; margin: 0; border: 2px dashed var(--rose-soft); border-radius: 10px; display: grid; place-items: center; align-content: center; cursor: pointer; background: var(--white); color: var(--rose); font-size: 1.3rem; }
.addimg span { font-size: .72rem; font-weight: 800; }
.addimg:hover { background: var(--rose-tint); }
.upmsg { min-height: 1em; margin: 4px 0; font-size: .82rem; color: var(--rose); }

@media (max-width: 900px) {
    .healing { order: 3; width: 100%; max-width: none; margin: 0; justify-content: center; font-size: 1.08rem; }
    .tools { margin-left: auto; }
}
@media (max-width: 560px) {
    .toolbtn span { display: none; }
    .toolbtn { padding: 5px 10px; }
    .healing { font-size: 1rem; padding: 5px 12px; }
    .knock { width: 40px; height: 40px; margin-top: -20px; }
    .paper { padding: 22px 18px 16px; }
    .paper .ptext p { font-size: .94rem; line-height: 1.65; }
}

/* small screens: keep the whole letter readable above the pocket */
@media (max-height: 760px) {
    .paper { padding: 18px 20px 52px; }
    .paper .pt { margin-bottom: 6px; }
    .paper .ptext p { font-size: .9rem; line-height: 1.6; margin-bottom: .55em; }
    .paper .psign { font-size: .9rem; }
}
@media (max-height: 640px) {
    .paper .ptext p { font-size: .84rem; line-height: 1.5; }
}