/* Styles for the three added sections (star, jar, letters). Existing style.css is untouched. */

/* ---------- 11 / STAR ---------- */
.x-star{position:relative;overflow:hidden;text-align:center;color:#e9ebff;padding:84px 6% 72px;background:radial-gradient(ellipse at 50% 18%,#101a4a 0%,#070b24 45%,#01020a 100%)}
.x-sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.x-nebula{position:absolute;inset:-10%;pointer-events:none;opacity:.8;background:
  radial-gradient(40% 30% at 22% 28%,#6a3cc055,transparent 70%),
  radial-gradient(35% 28% at 80% 22%,#2a7fd244,transparent 70%),
  radial-gradient(45% 30% at 65% 78%,#c0409a33,transparent 70%),
  radial-gradient(30% 25% at 15% 80%,#1fb5b52e,transparent 70%);
  animation:xDrift 40s ease-in-out infinite alternate}
@keyframes xDrift{to{transform:translate(2%,-2%) scale(1.06)}}
.x-star-inner{position:relative;z-index:2;max-width:560px;margin:0 auto}
.x-eyebrow{display:block;font:10px var(--mono);letter-spacing:.14em;color:#9aa4e0}
.x-date{margin:22px 0 6px;font:500 clamp(22px,5vw,30px) var(--serif);letter-spacing:.3em;color:#f3e6bd;text-indent:.3em}
.x-star-title{margin:0;font:600 clamp(19px,5.2vw,32px)/1.25 var(--serif);letter-spacing:.2em;text-indent:.2em;color:#fff}
.x-star-svg{display:block;width:min(400px,92%);height:auto;margin:14px auto 4px;overflow:visible}
.x-hero{transform-box:fill-box;transform-origin:center;transform:scale(.12);opacity:.55;animation:xMystery 3s ease-in-out infinite alternate;transition:transform 2.4s cubic-bezier(.2,.8,.2,1),opacity 1.6s}
@keyframes xMystery{to{opacity:.9}}
.x-rays{transform-box:fill-box;transform-origin:center}
.x-lines line{stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}
.x-cstars circle{opacity:0;transition:opacity 1s;filter:drop-shadow(0 0 4px #cfd8ff)}
.x-cstars circle:nth-child(n){transition-delay:calc(1.5s + var(--n,0) * .25s)}
.x-cstars circle:nth-child(1){--n:0}.x-cstars circle:nth-child(2){--n:1}.x-cstars circle:nth-child(3){--n:2}.x-cstars circle:nth-child(4){--n:3}.x-cstars circle:nth-child(5){--n:4}.x-cstars circle:nth-child(6){--n:5}.x-cstars circle:nth-child(7){--n:6}.x-cstars circle:nth-child(8){--n:7}.x-cstars circle:nth-child(9){--n:8}
.x-star.is-revealed .x-hero{transform:scale(1);opacity:1;animation:none}
.x-star.is-revealed .x-rays{animation:xPulse 4.5s ease-in-out infinite 2.4s}
@keyframes xPulse{50%{transform:scale(1.12) rotate(6deg);opacity:.85}}
.x-star.is-revealed .x-lines line{animation:xDraw 1.1s ease forwards;animation-delay:calc(var(--d) * 1s)}
@keyframes xDraw{to{stroke-dashoffset:0}}
.x-star.is-revealed .x-cstars circle{opacity:1;animation:xTw 3s ease-in-out infinite alternate 5s}
@keyframes xTw{50%{opacity:.55}}

[data-r]{opacity:0;transform:translateY(14px);visibility:hidden}
.x-star.is-revealed [data-r]{visibility:visible;opacity:1;transform:none;transition:opacity 1.4s ease,transform 1.4s ease;transition-delay:calc(var(--d) * 1s)}
.x-sign{display:block;font:10px var(--mono);letter-spacing:.2em;color:#a9b4ff}
.x-name{margin:10px 0 4px;font:600 clamp(40px,12vw,68px)/1 var(--serif);letter-spacing:.06em;background:linear-gradient(180deg,#fff,#ffe29a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px #ffd98a66)}
.x-name span{display:inline-block;opacity:0;transform:translateY(10px)}
.x-star.is-revealed .x-name span{opacity:1;transform:none;transition:.9s ease;transition-delay:calc(1.4s + var(--i) * .14s)}
.x-born{margin:0;font:15px var(--serif);font-style:italic;letter-spacing:.12em;color:#d8ddff}
.x-message{margin:26px auto 0;max-width:470px}
.x-message p{margin:0 0 14px;font:16px/1.75 var(--serif);color:#e4e7ff}
.x-message .x-wish{font:italic 600 19px/1.6 var(--serif);color:#ffe6a8}
.x-btn{margin-top:26px;font:11px var(--mono);letter-spacing:.14em;color:#fff4d4;background:linear-gradient(135deg,#ffffff14,#ffffff06);border:1px solid #ffe29aaa;border-radius:40px;padding:16px 28px;cursor:pointer;box-shadow:0 0 22px #ffd98a33,inset 0 0 14px #ffffff0d;transition:.3s;animation:xBtn 3s ease-in-out infinite}
.x-btn:hover{box-shadow:0 0 34px #ffd98a66;transform:translateY(-2px)}
@keyframes xBtn{50%{box-shadow:0 0 34px #ffd98a55}}
.x-star.is-revealed .x-btn{display:none}
.x-replay{margin-top:18px;background:none;border:0;font:10px var(--mono);letter-spacing:.14em;color:#9aa4e0;cursor:pointer;padding:10px}
.x-replay:hover{color:#fff}
.x-note{margin:22px auto 0;max-width:420px;font:9.5px/1.6 var(--mono);letter-spacing:.06em;color:#7f89c4}

/* ---------- 12 / JAR ---------- */
.x-jar-section{background:linear-gradient(160deg,#f6e9d8,#efd9c6 55%,#ecd0c0);border-top:1px solid #dcc6b0}
.x-jar-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:44px;align-items:start;max-width:900px;margin:0 auto}
.x-jar-col{display:flex;flex-direction:column;align-items:center;gap:12px}
.x-jar-wrap{position:relative;width:min(300px,100%);padding-top:34px;animation:xFloat 6s ease-in-out infinite}
@keyframes xFloat{50%{transform:translateY(-6px)}}
.x-jar-lid{position:absolute;top:6px;left:50%;width:62%;height:34px;transform:translateX(-50%);border-radius:10px 10px 4px 4px;background:repeating-linear-gradient(90deg,#b98a5f 0 6px,#a9794f 6px 12px);box-shadow:0 3px 6px #5b3d2440;z-index:4}
.x-jar{position:relative;width:100%;aspect-ratio:300/340;border-radius:30px 30px 60px 60px;border:2px solid #ffffffcc;background:linear-gradient(105deg,#ffffff7a,#ffffff1f 40%,#ffffff33 75%,#ffffff70);box-shadow:inset 0 0 40px #ffffff88,inset -14px 0 30px #ffffff30,0 22px 34px #7a583a30;overflow:hidden;backdrop-filter:blur(1px)}
.x-jar:before{content:"";position:absolute;left:12%;right:12%;top:0;height:11px;background:#ffffff66;border-radius:0 0 12px 12px}
.x-jar-shine{position:absolute;left:9%;top:12%;width:7%;height:62%;border-radius:20px;background:linear-gradient(#ffffffcc,#ffffff00);z-index:3;pointer-events:none}
.x-paper{position:absolute;width:15%;height:10.5%;background:linear-gradient(135deg,#fffaf0,#f2e4cb);border-radius:2px;box-shadow:0 2px 4px #5b3d2430;transform:rotate(var(--r));transition:transform .75s cubic-bezier(.3,.8,.3,1),opacity .6s;animation:xBob 5s ease-in-out infinite alternate;animation-delay:var(--a)}
.x-paper:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#c9a98a}
.x-paper:before{content:"♡";position:absolute;right:3px;bottom:0;font-size:7px;color:#c97b6b}
.x-paper.is-peach{background:linear-gradient(135deg,#fde5da,#f3c9b6)}.x-paper.is-lilac{background:linear-gradient(135deg,#ece6f5,#d6cbe6)}
@keyframes xBob{to{translate:0 -2px}}
.x-paper.is-out{transform:translateY(-70px) scale(2.3) rotate(0deg);opacity:0;z-index:5}
.x-paper.is-gone{display:none}
.x-btn-warm{font:11px var(--mono);letter-spacing:.12em;color:#fff7ec;background:#a9573f;border:0;border-radius:40px;padding:15px 26px;cursor:pointer;box-shadow:0 8px 18px #a9573f44;transition:.25s}
.x-btn-warm:hover{transform:translateY(-2px);box-shadow:0 12px 22px #a9573f55}
.x-btn-warm:disabled{opacity:.55;cursor:default;transform:none}
.x-note-card{position:relative;padding:34px 30px 28px;background:#fffaf0 repeating-linear-gradient(transparent 0 31px,#e7dcc8 32px);border:1px solid #eadfca;box-shadow:0 14px 30px #6a4a2e26;transform:rotate(-1deg);min-height:200px}
.x-note-tape{position:absolute;top:-10px;left:50%;width:84px;height:22px;background:#e6c98aaa;transform:translateX(-50%) rotate(-3deg)}
.x-note-no{font:10px var(--mono);letter-spacing:.14em;color:#a9573f}
.x-note-title{margin:10px 0 8px;font:600 clamp(26px,5vw,34px)/1.1 var(--hand);color:#8e4a37}
.x-note-text{margin:0;font:16px/2 var(--hand);font-size:21px;color:#4a4036}
.x-note-card.is-empty .x-note-title,.x-note-card.is-empty .x-note-text{opacity:.6}
.x-note-card.is-new{animation:xUnfold .85s cubic-bezier(.2,.9,.3,1)}
@keyframes xUnfold{0%{transform:scale(.3) rotate(-14deg) translateY(60px);opacity:0}60%{opacity:1}100%{transform:rotate(-1deg)}}
.x-final{margin-top:20px;padding:24px;background:#a9573f;color:#fff4e6;font:italic 17px/1.8 var(--serif);box-shadow:0 12px 26px #a9573f40;animation:xUnfold .9s ease}
.x-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.x-chips button{width:34px;height:34px;border-radius:50%;border:1px dashed #b89c82;background:transparent;color:#a39280;font:10px var(--mono);cursor:default}
.x-chips button.on{background:#f3c9b6;border:1px solid #c98a73;color:#6a3a2c;cursor:pointer}
.x-chips button.on:hover{background:#e9b39d}

/* ---------- 13 / LETTERS ---------- */
.x-letters-section{background:linear-gradient(170deg,#ebe3f2,#f3e1da 55%,#f6ead6);border-top:1px solid #d8cde0}
.x-count{max-width:640px;margin:0 auto 38px;text-align:center}
.x-count-label{font:11px var(--mono);letter-spacing:.2em;color:#7a5d86}
.x-count-boxes{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px}
.x-count-boxes div{min-width:68px;padding:12px 6px 8px;background:#fffaf2;border:1px solid #e2d3dd;box-shadow:0 6px 14px #7a5d8622}
.x-count-boxes b{display:block;font:600 clamp(24px,7vw,34px)/1 var(--serif);color:#6b4a79;font-variant-numeric:tabular-nums}
.x-count-boxes small{display:block;margin-top:5px;font:8px var(--mono);letter-spacing:.12em;color:#9a8aa3}
.x-count-boxes i{font:600 24px var(--serif);color:#b79ac2;font-style:normal}
.x-count-hint{margin:14px 0 0;font:20px var(--hand);color:#9c5d49}
.x-complete{margin-top:6px;padding:26px 24px;background:#fffaf2;border:1px dashed #b79ac2;font:italic 17px/1.8 var(--serif);color:#5d4268;box-shadow:0 10px 24px #7a5d8626;animation:xUnfold .9s ease}
.x-count.is-complete .x-count-label,.x-count.is-complete .x-count-boxes,.x-count.is-complete .x-count-hint{display:none}
.x-env-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:960px;margin:0 auto}
.x-env{position:relative;border:0;background:none;padding:0;cursor:pointer;text-align:center;font:inherit;color:inherit;animation:xFloat 7s ease-in-out infinite;animation-delay:var(--fd,0s);transition:transform .25s}
.x-env:hover,.x-env:focus-visible{transform:translateY(-6px) rotate(-1.5deg)}
.x-env-art{position:relative;display:block;height:118px;background:linear-gradient(160deg,#f0c9b6,#e5a98f);box-shadow:0 12px 20px #7a4a3a30;overflow:hidden}
.x-env-art:before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#f9dccc,#ecb79f);clip-path:polygon(0 0,100% 0,50% 58%)}
.x-env-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#e9b098,#dc9b80);clip-path:polygon(0 36%,50% 74%,100% 36%,100% 100%,0 100%)}
.x-env.is-unlocked .x-env-art{background:linear-gradient(160deg,#f6d9a8,#efbb86)}
.x-env.is-unlocked .x-env-art:before{background:linear-gradient(160deg,#fff0c9,#f6cf96)}
.x-env.is-unlocked .x-env-art:after{background:linear-gradient(180deg,#f2c58f,#e8aa70)}
.x-env.is-locked .x-env-art{filter:saturate(.45) brightness(.97)}
.x-seal{position:absolute;z-index:3;left:50%;top:50%;width:38px;height:38px;margin:-12px 0 0 -19px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:#865042;color:#fbeedd;box-shadow:0 2px 6px #4a2a2260}
.x-env.is-locked .x-seal{background:#7d7385}
.x-env.is-new .x-seal{animation:xBeat 1.6s ease-in-out infinite}
@keyframes xBeat{50%{transform:scale(1.15)}}
.x-env-month{display:block;margin-top:10px;font:600 15px var(--serif);letter-spacing:.06em;color:#4f3a5a}
.x-env-status{display:block;margin-top:2px;font:8.5px var(--mono);letter-spacing:.1em;color:#8a7a91}
.x-env.is-unlocked .x-env-status{color:#a9573f}
.x-env.shake{animation:xShake .45s}
@keyframes xShake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.x-env-msg{min-height:26px;margin:22px 0 0;text-align:center;font:21px var(--hand);color:#9c5d49}

/* letter popup */
.x-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:18px;background:#2a1f3299;backdrop-filter:blur(3px)}
.x-modal.open{display:flex}
.x-letter{position:relative;width:min(640px,100%);max-height:88vh;max-height:88dvh;display:flex;flex-direction:column;background:#fcf6e8;box-shadow:0 30px 70px #1a0f2480;animation:xUnfold .6s cubic-bezier(.2,.9,.3,1)}
.x-letter-head{padding:24px 64px 14px 28px;border-bottom:1px solid #eadcc6}
.x-letter-head span{font:10px var(--mono);letter-spacing:.16em;color:#a9573f}
.x-letter-head h3{margin:6px 0 0;font:600 clamp(20px,5vw,27px)/1.2 var(--serif);color:#4f3a5a}
.x-letter-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:20px 28px 30px;white-space:pre-wrap;font:21px/1.85 var(--hand);color:#48403a;background:repeating-linear-gradient(transparent 0 38px,#eadfc8 39px);background-attachment:local}
.x-letter-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;border:1px solid #d9c9b0;background:#fffaf0;font:20px/1 var(--sans);color:#6b4a79;cursor:pointer;z-index:2}
.x-letter-close:hover{background:#f3e3d0}
body.x-lock{overflow:hidden}

@media(max-width:900px){.x-env-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.x-jar-layout{grid-template-columns:1fr;gap:34px}.x-star{padding:70px 5% 60px}}
@media(max-width:560px){.x-env-grid{grid-template-columns:repeat(2,1fr);gap:18px}.x-env-art{height:104px}.x-count-boxes{gap:4px}.x-count-boxes div{min-width:0;flex:1;padding:10px 2px 7px}.x-letter-body{font-size:20px;padding:16px 20px 26px}.x-letter-head{padding:20px 58px 12px 20px}.x-note-card{padding:30px 22px 24px}}
@media(prefers-reduced-motion:reduce){.x-nebula,.x-jar-wrap,.x-env,.x-paper,.x-btn,.x-hero,.x-star.is-revealed .x-rays,.x-star.is-revealed .x-cstars circle{animation:none!important}.x-star.is-revealed [data-r],.x-star.is-revealed .x-name span,.x-hero{transition-duration:.01s;transition-delay:0s!important}.x-star.is-revealed .x-lines line{animation-duration:.01s;animation-delay:0s}}