/* HeartSync + Touch the Same Star — quiet mobile-first game screens. */
.bond-surface{max-width:910px;margin:0 auto 24px;padding:clamp(20px,4vw,38px);border:1px solid #ffffff1f;border-radius:21px;background:linear-gradient(155deg,#202330,#171d29);color:#f9f2ff;box-shadow:0 18px 50px #0003;overflow:hidden}
.bond-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.bond-overline{color:#f4add1;font-size:10px;letter-spacing:2px;font-weight:750}.bond-pill{font:600 10px ui-monospace,monospace;color:#cbbad5;letter-spacing:1px;background:#ffffff0c;border:1px solid #ffffff20;padding:7px 10px;border-radius:99px}
.bond-title{font-size:clamp(31px,5vw,47px);line-height:1.14;letter-spacing:-1.5px;margin:16px 0 8px;font-weight:730}.bond-subtitle{color:#b5b9cb;font-size:13px;line-height:1.7;margin:0 0 23px;max-width:610px}
.bond-progress{display:flex;gap:5px;max-width:600px;margin:18px 0 27px}.bond-progress span{height:5px;flex:1;background:#ffffff18;border-radius:9px}.bond-progress .complete{background:#a5e7d0}.bond-progress .current{background:#f7aed2;box-shadow:0 0 16px #f7addd4b}
.bond-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:25px 0}.bond-mode{min-width:0;min-height:130px;display:flex;align-items:flex-start;flex-direction:column;gap:8px;padding:18px;text-align:left;border:1px solid #ffffff23;background:#ffffff08;border-radius:16px;transition:transform .18s,border-color .18s,background .18s}.bond-mode:hover:not(:disabled){transform:translateY(-2px);border-color:#ffd2e770}.bond-mode.selected{border-color:#ffc5db9c;background:#f7add31a}.bond-mode:disabled{opacity:.82}.bond-mode-icon{font-size:27px;line-height:1;color:#ffb9dc}.bond-mode b{font-size:15px;color:#fcf3fb}.bond-mode small{font-size:11px;color:#aeb3c1;line-height:1.5}.bond-setup-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}.bond-muted{font-size:12px;line-height:1.65;color:#b1bac7}
.bond-button{min-height:48px;border-radius:12px;padding:13px 21px;font-size:13px;font-weight:750;border:1px solid #ffffff2a;color:#e9def0;background:#323040}.bond-button:disabled{opacity:.44}.bond-primary{color:#302036;border:0;background:linear-gradient(100deg,#ffcfb1,#fda6cd);box-shadow:0 10px 25px #fc9fc323}.bond-primary:hover:not(:disabled){filter:brightness(1.09)}
.bond-question-tag{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;color:#d3bad6;font-size:11px;letter-spacing:1px}.bond-question-tag span:first-child{font-size:19px;color:#ffc0dd}
.bond-question{font-size:clamp(23px,3.4vw,36px);letter-spacing:-.8px;font-weight:650;line-height:1.32;margin:12px 0 15px;max-width:740px}.bond-instruction{color:#b6c0d0;font-size:12px;line-height:1.7;margin:0 0 18px}.bond-instruction b{color:#f5d9e9}
.bond-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bond-option{display:flex;align-items:center;text-align:left;gap:12px;min-height:79px;border:1px solid #ffffff24;border-radius:14px;padding:14px 16px;background:#292b3b;color:#f5eefa;font-size:14px;line-height:1.45;transition:transform .16s,border-color .16s,background .16s}.bond-option>span:nth-child(2){flex:1}.bond-option-index{color:#cca3bf;font:11px ui-monospace,monospace}.bond-option-check{color:#ffb5d5;font-size:20px}.bond-option:hover:not(:disabled){transform:translateY(-2px);border-color:#f8b9d47a;background:#363044}.bond-option.selected{background:#ff9dc82a;border-color:#f6add2}
.bond-waiting-panel{max-width:600px;margin:22px auto;display:flex;align-items:center;flex-direction:column;text-align:center;gap:9px;border:1px solid #ffffff20;border-radius:17px;background:#ffffff08;padding:32px 18px}.bond-waiting-panel b{font-size:16px}.bond-waiting-panel>span{font-size:12px;color:#b6b6ca}.bond-beating{font-size:60px;color:#ffb7d6;line-height:1;animation:bond-pulse 1.8s ease-in-out infinite}.bond-waiting{display:flex;align-items:center;gap:9px;font-size:12px;color:#e5cde2}.bond-loading{display:inline-block;width:11px;height:11px;border-radius:100%;background:#fdb6cd;animation:bond-pulse 1.7s ease-in-out infinite}
.bond-reveal-center{text-align:center;padding:6px 0 20px}.bond-reveal-icon{display:grid;place-items:center;font-size:72px;width:126px;height:126px;margin:0 auto 15px;border:2px solid #ffbdd74d;border-radius:100%;color:#ffb0d0;background:#f99db21b;animation:bond-arrive .9s cubic-bezier(.2,.8,.2,1)}.bond-reveal-icon.match{box-shadow:0 0 60px #ff9dc658;animation:bond-arrive 1s cubic-bezier(.2,.8,.2,1),bond-glow 2.3s ease-in-out infinite}.bond-reveal-center h3{font-size:clamp(20px,4vw,28px);margin:0 0 7px}.bond-reveal-center p{color:#c8bbd5;font-size:12px;max-width:520px;margin:0 auto}.bond-reveal-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.bond-reveal-card{background:#272b37;border:1px solid #ffffff20;border-radius:14px;padding:19px}.bond-reveal-card small{display:block;color:#e6aecc;font-size:10px;letter-spacing:1px}.bond-reveal-card strong{display:block;font-size:18px;margin:10px 0 15px;line-height:1.35}.bond-predict-check{font-size:11px;color:#c3bdcd;border-top:1px solid #ffffff1c;padding-top:12px;line-height:1.65}.bond-predict-check.correct{color:#a4e8c7}.bond-points{font-size:12px;text-align:center;margin:22px 0;color:#f0d1e1}.bond-points span{margin:0 7px;color:#b6a8bf}.bond-next{display:block;width:min(100%,360px);margin:20px auto 3px}
.bond-final-heart{text-align:center;font-size:72px;color:#fdbbd7;text-shadow:0 0 32px #ffaad05a;line-height:1.3;animation:bond-glow 2.7s ease-in-out infinite}.bond-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:24px 0}.bond-stats>div{display:flex;flex-direction:column;align-items:center;gap:6px;background:#ffffff0b;border-radius:13px;padding:19px 8px}.bond-stats strong{font-size:clamp(28px,5vw,38px)}.bond-stats strong span{color:#bdadca;font-size:15px}.bond-stats small{font-size:9px;text-align:center;color:#c4b4c8;letter-spacing:.7px}.bond-finale-note{color:#e9d9e5;text-align:center;font:italic clamp(18px,3vw,24px)/1.5 Georgia,serif;max-width:590px;margin:23px auto}.bond-memories h3{font-size:16px;margin:26px 0 12px}.bond-memory-list{display:grid;gap:9px}.bond-memory-list>div{background:#ffffff07;border:1px solid #ffffff15;border-radius:11px;padding:14px}.bond-memory-list b{display:block;font-size:12px}.bond-memory-list small{display:block;font-size:11px;color:#b4bbcb;margin-top:5px;line-height:1.6}.bond-final-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin:25px auto 5px}
.bond-stars{background:radial-gradient(ellipse at 50% 25%,#252858,#121b32 70%,#111525);border-color:#869bd42b}.bond-stars .bond-title{color:#ffecfb}.bond-star-question{text-align:center;max-width:600px;margin:2px auto 20px}.bond-star-question small{color:#d5b4e8;font-size:10px;letter-spacing:2px}.bond-star-question h3{font-size:clamp(21px,3.5vw,29px);margin:10px 0;line-height:1.32}.bond-star-question p{color:#b7c3db;font-size:12px;line-height:1.65}.bond-sky{position:relative;overflow:hidden;height:clamp(350px,55vw,490px);width:100%;max-width:760px;margin:20px auto;border:1px solid #ffffff22;border-radius:22px;background:radial-gradient(circle at 52% 60%,#222d60,#101935 60%,#0c1227);isolation:isolate}.bond-sky:before{content:"";position:absolute;inset:0;opacity:.7;pointer-events:none;background-image:radial-gradient(circle,#f2eaff 1px,transparent 1.5px),radial-gradient(circle,#d4c4ff 1px,transparent 1.5px);background-size:83px 96px,119px 84px;background-position:17px 9px,42px 36px}.bond-moon{position:absolute;right:8%;top:5%;font-size:42px;color:#d6d2fa88;pointer-events:none}.bond-star{position:absolute;left:var(--sx);top:var(--sy);transform:translate(-50%,-50%);width:130px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:transparent;color:#f6d8ff;cursor:pointer;z-index:2;padding:0;border:none}.bond-star:disabled{opacity:.83;cursor:default}.bond-star-glyph{display:block;font-size:clamp(23px,3.9vw,36px);line-height:1.2;color:#fff0ca;text-shadow:0 0 13px #ffdea7b4,0 0 30px #d6baff66;transition:transform .2s,filter .2s;animation:bond-twinkle 3.5s ease-in-out infinite}.bond-star:nth-of-type(3n) .bond-star-glyph{animation-delay:1s}.bond-star:not(:disabled):hover .bond-star-glyph,.bond-star.my-star .bond-star-glyph{transform:scale(1.25);color:#ffacda}.bond-star-label{font-size:10px;font-weight:600;color:#e1d6f1;text-align:center;line-height:1.2;text-shadow:0 2px 6px #070b20;max-width:115px}.bond-star.revealed .bond-star-glyph{color:#ffabc9;filter:drop-shadow(0 0 11px #ffacd0);transform:scale(1.27)}.bond-star:focus-visible{outline:2px solid #fff0fa;border-radius:12px;outline-offset:4px}.bond-sky-lines,.bond-memory-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;filter:drop-shadow(0 0 5px #fbc1e5)}.bond-star-clue{max-width:680px;margin:10px auto;text-align:center;background:#b5d9ff10;border:1px solid #b5d9ff46;border-radius:12px;padding:13px;color:#dfeaff;font-size:13px}.bond-star-clue small{display:block;color:#b9c6e7;font-size:10px;letter-spacing:1.3px;margin-bottom:4px}.bond-sky-hint{text-align:center;color:#b5c9e8;font-size:11px}.bond-star-reveal{text-align:center;margin:10px auto;max-width:650px}.bond-star-reveal .bond-star-heart{font-size:51px;color:#ffbada;animation:bond-arrive .8s ease-out}.bond-star-reveal h3{font-size:22px;margin:5px 0 8px}.bond-star-reveal p{font-size:12px;color:#cbd0e6;line-height:1.65}.bond-star-finale{text-align:center}.bond-star-finale h3{font-size:24px;margin:0}.bond-star-finale p{font-size:13px;color:#e3dced;line-height:1.6;max-width:530px;margin:12px auto}.bond-star-stats{color:#e7c7f8;font-size:13px}.bond-memory-sky{height:clamp(320px,55vw,490px)}.bond-memory-star{position:absolute;left:var(--sx);top:var(--sy);transform:translate(-50%,-50%);width:29px;height:29px;display:grid;place-items:center;border:1px solid #fff3c1;background:#ffc4c5;color:#322134;box-shadow:0 0 22px #f5c9dd98;border-radius:100%;font:700 13px sans-serif}
@keyframes bond-twinkle{50%{opacity:.62;filter:brightness(1.35)}}@keyframes bond-pulse{50%{transform:scale(1.13);opacity:.72}}@keyframes bond-glow{50%{filter:drop-shadow(0 0 16px #ffd0e4)}}@keyframes bond-arrive{0%{transform:scale(.55);opacity:0}70%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
@media(max-width:620px){.bond-surface{padding:21px 15px 25px;margin:0 auto 15px;border-radius:16px}.bond-head{gap:9px}.bond-overline{font-size:9px;letter-spacing:1px}.bond-title{font-size:32px;margin:10px 0}.bond-subtitle{font-size:11px;line-height:1.6;margin-bottom:18px}.bond-progress{margin:15px 0 19px}.bond-setup-grid{gap:9px;margin:17px 0}.bond-mode{padding:13px;min-height:121px;border-radius:12px}.bond-mode b{font-size:12px}.bond-mode small{font-size:10px}.bond-question{font-size:23px}.bond-options{grid-template-columns:1fr;gap:9px}.bond-option{font-size:13px;min-height:63px;padding:11px 12px}.bond-reveal-grid{grid-template-columns:1fr;gap:9px}.bond-reveal-card{padding:14px}.bond-reveal-card strong{font-size:15px}.bond-reveal-icon{width:94px;height:94px;font-size:56px}.bond-stats{gap:5px}.bond-stats>div{padding:12px 4px}.bond-stats small{font-size:8px}.bond-sky{height:clamp(365px,100vw,470px);border-radius:15px;margin:16px auto}.bond-star{width:82px;min-height:53px}.bond-star-glyph{font-size:27px}.bond-star-label{font-size:9px;max-width:82px;line-height:1.2}.bond-moon{font-size:29px}.bond-star-question h3{font-size:22px}.bond-star-reveal h3{font-size:19px}.bond-star-reveal p{font-size:11px}}
@media(max-width:365px){.bond-surface{padding:17px 11px}.bond-mode{padding:10px}.bond-mode b{font-size:11px}.bond-star{width:70px}.bond-star-glyph{font-size:24px}.bond-star-label{font-size:8px}.bond-stats strong{font-size:26px}}
@media(prefers-reduced-motion:reduce){.bond-beating,.bond-loading,.bond-reveal-icon,.bond-star-heart,.bond-final-heart,.bond-star-glyph{animation:none!important}.bond-mode,.bond-option,.bond-star-glyph{transition:none!important}}