.phase-two { position:fixed; inset:0; z-index:3; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; background:radial-gradient(ellipse at 50% 48%,rgba(30,32,89,.26),transparent 48%); transition:opacity 1.6s ease,visibility 0s linear 1.6s; }
.phase-two::before { content:""; position:absolute; inset:0; opacity:.42; pointer-events:none; background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.75) 0 1px,transparent 1.6px),radial-gradient(circle at 71% 31%,rgba(185,206,255,.72) 0 1px,transparent 1.7px),radial-gradient(circle at 42% 77%,rgba(237,193,255,.65) 0 1px,transparent 1.6px); background-size:137px 131px,193px 181px,251px 239px; }
.phase-two.active { opacity:1; visibility:visible; pointer-events:auto; transition:opacity 1.6s ease; }
.phase-two-header { position:absolute; z-index:3; top:4.3vh; left:50%; width:min(90vw,760px); transform:translateX(-50%); text-align:center; pointer-events:none; text-shadow:0 0 20px rgba(137,163,255,.45); }
.phase-two-header p { margin:0 0 7px; color:#91adf1; font:500 10px/1.2 ui-monospace,monospace; letter-spacing:.32em; }
.phase-two-header h2 { margin:0; color:#eceaff; font-size:clamp(15px,1.8vw,22px); font-weight:400; letter-spacing:.12em; }
.interactive-star-layer { position:absolute; inset:0; z-index:2; }
.interactive-star { --size:58px; --tone:205,184,255; --star-light:#f8fbff; --star-mid:#b9dcff; --star-deep:#78aef2; position:absolute; width:var(--size); height:var(--size); padding:0; border:0; border-radius:50%; background:transparent; transform:translate(-50%,-50%); touch-action:manipulation; isolation:isolate; transition:filter .25s ease; }
.interactive-star::before { content:""; position:absolute; z-index:-1; inset:-18%; border-radius:50%; background:radial-gradient(circle,rgba(var(--tone),.42) 0,rgba(var(--tone),.18) 42%,transparent 72%); filter:blur(5px); animation:halo-breathe 3.4s ease-in-out infinite; }
.interactive-star::after { content:""; position:absolute; z-index:-1; inset:8%; border-radius:50%; background:rgba(255,255,255,.14); filter:blur(8px); box-shadow:0 0 calc(var(--size)*.38) rgba(var(--tone),.42); }
.watercolor-star { position:absolute; z-index:2; inset:-4%; width:108%; height:108%; overflow:visible; filter:drop-shadow(0 0 3px rgba(255,255,255,.75)) drop-shadow(0 0 8px rgba(var(--tone),.48)); animation:star-breathe 3.4s ease-in-out infinite; transition:transform .25s ease,filter .25s ease; }
.star-fill-light { stop-color:var(--star-light); }.star-fill-mid{stop-color:var(--star-mid)}.star-fill-deep{stop-color:var(--star-deep)}
.star-shape { stroke:rgba(255,255,255,.82); stroke-width:3.4; stroke-linejoin:round; }
.star-outline { fill:none; stroke:var(--star-deep); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; opacity:.52; }
.star-wash { pointer-events:none; mix-blend-mode:screen; }.wash-one{fill:rgba(255,255,255,.36);filter:blur(3px)}.wash-two{fill:var(--star-deep);opacity:.13;filter:blur(5px)}
.star-highlight { fill:none; stroke:rgba(255,255,255,.82); stroke-width:4.8; stroke-linecap:round; opacity:.7; filter:blur(.45px); }
.star-mote { position:absolute; z-index:1; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.9); box-shadow:0 0 5px rgb(var(--tone)); animation:mote-orbit 4s linear infinite; }
.star-mote:nth-child(2){left:16%;top:36%;animation-delay:-1.4s}.star-mote:nth-child(3){right:17%;bottom:26%;animation-delay:-2.8s}
.interactive-star.focused,.interactive-star:hover { z-index:4; filter:brightness(1.48); }
.interactive-star.focused::before,.interactive-star:hover::before { transform:scale(1.28); background:radial-gradient(circle,rgba(var(--tone),.58) 0,rgba(var(--tone),.24) 46%,transparent 74%); }
.interactive-star.focused .watercolor-star,.interactive-star:hover .watercolor-star { transform:scale(1.09); filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 13px rgba(var(--tone),.78)); }
.interactive-star.collecting { z-index:6; pointer-events:none; animation:star-dissolve 1.15s cubic-bezier(.18,.78,.23,1) forwards; }
.interactive-star.collecting::before { animation:halo-open 1.05s ease-out forwards; }
.interactive-star.collected { visibility:hidden; pointer-events:none; }
.sparkle { position:absolute; z-index:7; left:50%; top:50%; width:4px; height:4px; border-radius:50%; background:#fff; pointer-events:none; animation:sparkle-burst .95s ease-out forwards; }
.star-counter { position:absolute; z-index:5; top:4.6vh; right:clamp(18px,4vw,58px); color:#e7eaff; font:300 clamp(17px,2vw,25px)/1 ui-monospace,monospace; letter-spacing:.08em; text-shadow:0 0 14px rgba(175,195,255,.7); }
.star-counter strong { font-weight:500; }.star-counter span{opacity:.55;font-size:.68em}
.phase-two-next { position:absolute; z-index:6; left:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); padding:10px 17px; border:1px solid rgba(184,198,255,.32); border-radius:999px; color:#e8e9ff; background:rgba(13,20,55,.68); box-shadow:0 0 20px rgba(137,126,235,.13); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .45s ease,transform .45s ease,background .25s ease,box-shadow .25s ease; }
.phase-two-next.visible { opacity:1; visibility:visible; transform:translateY(0); }
.phase-two-next:hover,.phase-two-next.gesture-hover { background:rgba(102,89,183,.54); border-color:rgba(226,215,255,.75); box-shadow:0 0 14px rgba(213,190,255,.5),0 0 34px rgba(141,116,241,.25); }
.phase-two-gesture { position:absolute; z-index:45; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); width:270px; min-width:270px; min-height:160px; overflow:hidden; border:1px solid rgba(145,177,255,.24); border-radius:15px; background:linear-gradient(135deg,rgba(7,14,42,.88),rgba(28,18,57,.79)); box-shadow:0 12px 40px rgba(0,0,20,.3),inset 0 0 24px rgba(130,134,255,.05); backdrop-filter:blur(13px); text-align:left; transition:opacity .35s ease,visibility .35s ease; }
#app:not([data-phase="phase2"]):not([data-phase^="phase3"]) .phase-two-gesture { opacity:0; visibility:hidden; pointer-events:none; }
.gesture-panel-header { display:flex; align-items:center; justify-content:space-between; height:40px; padding:0 9px 0 13px; border-bottom:1px solid rgba(161,180,255,.13); color:#dce4ff; cursor:grab; touch-action:none; user-select:none; }
.phase-two-gesture.manipulating .gesture-panel-header { cursor:grabbing; }
.gesture-panel-title { font-size:12px; letter-spacing:.07em; white-space:nowrap; }
.gesture-panel-toggle { width:25px; height:25px; padding:0; border:1px solid rgba(171,190,255,.2); border-radius:50%; background:rgba(116,129,194,.08); color:#cad5f5; line-height:22px; text-align:center; }
.gesture-panel-toggle:hover { background:rgba(135,121,210,.32); border-color:rgba(212,204,255,.52); }
.gesture-panel-body { height:calc(100% - 40px); min-height:119px; overflow:auto; padding:10px 13px 16px; }
.gesture-action { display:grid; grid-template-columns:32px minmax(180px,1fr); gap:10px; align-items:center; width:100%; padding:4px 0 10px; border:0; background:transparent; text-align:left; }
.gesture-action:hover .gesture-copy strong { color:#fff; text-shadow:0 0 10px rgba(192,180,255,.55); }
.gesture-panel-resize { position:absolute; z-index:2; right:3px; bottom:3px; width:15px; height:15px; cursor:nwse-resize; touch-action:none; opacity:.42; background:linear-gradient(135deg,transparent 0 48%,rgba(185,196,241,.45) 49% 56%,transparent 57% 68%,rgba(209,200,255,.62) 69% 76%,transparent 77%); }
.gesture-panel-resize:hover { opacity:.9; }
.phase-two-gesture.collapsed { width:auto; min-width:138px; height:42px; min-height:42px; border-radius:999px; }
.phase-two-gesture.collapsed .gesture-panel-header { height:40px; border-bottom:0; padding-left:14px; }
.phase-two-gesture.collapsed .gesture-panel-body,.phase-two-gesture.collapsed .gesture-panel-resize { display:none; }
.gesture-copy strong,.gesture-copy small { display:block; }.gesture-copy strong{font-size:13px;font-weight:500;color:#e5e9ff}.gesture-copy small{margin-top:4px;font-size:10px;color:#92a6d8;letter-spacing:.05em}
.gesture-orb { width:15px;height:15px;margin:auto;border-radius:50%;background:rgba(127,147,218,.3);box-shadow:0 0 10px rgba(125,150,255,.25);transition:filter .2s,transform .2s,box-shadow .2s; }
.phase-two-gesture[data-visual="starting"] .gesture-orb{animation:orb-pulse 1.3s ease-in-out infinite;background:#9aaeff}.phase-two-gesture[data-visual="searching"] .gesture-orb{background:#9a9ddd;box-shadow:0 0 14px rgba(159,161,255,.55)}.phase-two-gesture[data-visual="detected"] .gesture-orb,.phase-two-gesture[data-visual="tracking"] .gesture-orb{background:#d4ccff;box-shadow:0 0 9px #fff,0 0 22px #968aff}.phase-two-gesture[data-visual="locked"] .gesture-orb{transform:scale(1.2);background:#ffd8fa;box-shadow:0 0 10px #fff,0 0 28px #db8fff}.phase-two-gesture.pinch-success .gesture-orb{animation:orb-success .75s ease-out}
.phase-two-debug { display:none; margin-top:5px; padding-top:9px; border-top:1px solid rgba(161,180,255,.15); color:#afbee7; font:11px/1.55 ui-monospace,"Microsoft YaHei",monospace; white-space:pre-line; }
.phase-two.debug .phase-two-debug,.phase-two-gesture.debug .phase-two-debug { display:block; }
.magic-cursor { position:absolute; z-index:21; left:0; top:0; width:19px; height:19px; border:1px solid rgba(245,235,255,.95); border-radius:50%; opacity:0; pointer-events:none; transform:translate(-50%,-50%); box-shadow:0 0 8px #fff,0 0 22px #a991ff; transition:opacity .12s; }
.magic-cursor.visible { opacity:1; }.magic-cursor::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff}
.debug-radius { display:none;position:absolute;z-index:7;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}.phase-two.debug .debug-radius.visible{display:block}.nearest-radius{border:1px dashed rgba(116,207,255,.8);background:rgba(116,207,255,.035)}.locked-radius{border:2px solid rgba(244,164,255,.9);box-shadow:0 0 18px rgba(223,126,255,.6)}
.phase-two-prompt { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at 50% 48%,rgba(53,45,114,.28),rgba(2,5,20,.72)); backdrop-filter:blur(7px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease,visibility 0s linear .45s; }
.phase-two-prompt.visible { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .45s ease; }
.star-completion-dialog { position:relative; width:min(520px,calc(100vw - 38px)); padding:38px 34px 32px; overflow:hidden; border:1px solid rgba(208,203,255,.42); border-radius:24px; background:linear-gradient(145deg,rgba(15,22,64,.94),rgba(53,31,81,.91)); box-shadow:0 24px 80px rgba(0,0,25,.55),0 0 48px rgba(153,124,255,.18),inset 0 0 50px rgba(170,185,255,.05); text-align:center; }
.star-completion-dialog::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 15% 22%,rgba(255,255,255,.5) 0 1px,transparent 1.8px),radial-gradient(circle at 81% 68%,rgba(233,192,255,.48) 0 1px,transparent 1.8px); background-size:83px 79px,111px 103px; opacity:.38; }
.dialog-star { display:block; position:relative; color:#fff1b9; font-size:35px; text-shadow:0 0 9px #fff,0 0 24px #d4a8ff; animation:dialog-star-pulse 2.2s ease-in-out infinite; }
.dialog-eyebrow { position:relative; margin:12px 0 8px; color:#9fb6f0; font:500 10px/1.2 ui-monospace,monospace; letter-spacing:.28em; }
.star-completion-dialog h3 { position:relative; margin:0; color:#fbf7ff; font-size:clamp(22px,3vw,30px); font-weight:450; letter-spacing:.08em; text-shadow:0 0 18px rgba(220,191,255,.55); }
.dialog-copy { position:relative; margin:13px auto 25px; color:#b9c4e6; font-size:13px; line-height:1.7; }
.dialog-actions { position:relative; display:flex; justify-content:center; gap:12px; }
.dialog-button { min-width:150px; padding:11px 18px; border-radius:999px; transition:transform .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease; }
.dialog-button.secondary { border:1px solid rgba(169,190,255,.32); background:rgba(13,24,65,.6); }
.dialog-button.primary { border:1px solid rgba(239,216,255,.68); background:linear-gradient(120deg,rgba(112,123,229,.74),rgba(211,125,205,.62)); box-shadow:0 0 24px rgba(167,128,235,.3); }
.dialog-button:hover,.dialog-button.gesture-hover { transform:translateY(-2px) scale(1.025); border-color:rgba(255,255,255,.9); background-color:rgba(119,102,205,.72); box-shadow:0 0 13px rgba(255,255,255,.36),0 0 34px rgba(194,139,255,.45); }
.dialog-button[hidden] { display:none; }
@keyframes dialog-star-pulse{50%{transform:scale(1.12);filter:brightness(1.25)}}
@keyframes star-breathe{50%{transform:scale(.96) rotate(-1deg)}}@keyframes halo-breathe{50%{opacity:.7;transform:scale(1.08)}}@keyframes mote-orbit{0%{transform:rotate(0) translateX(7px)}50%{opacity:.3}100%{transform:rotate(360deg) translateX(7px)}}@keyframes halo-open{0%{transform:scale(1)}45%{transform:scale(1.85);opacity:1}100%{transform:scale(3.2);opacity:0}}@keyframes star-dissolve{0%{filter:brightness(1)}30%{filter:brightness(2.5);transform:translate(-50%,-50%) scale(1.12)}100%{filter:brightness(1.7);transform:translate(-50%,-50%) scale(.25);opacity:0}}@keyframes sparkle-burst{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}@keyframes orb-pulse{50%{transform:scale(1.25);filter:brightness(1.4)}}@keyframes orb-success{0%{box-shadow:0 0 0 0 rgba(228,173,255,.9)}100%{box-shadow:0 0 0 24px rgba(228,173,255,0)}}
@media(max-width:650px){.phase-two-header{top:3vh}.phase-two-header h2{padding:0 50px}.star-counter{top:3.5vh}.phase-two-gesture{right:10px;bottom:10px;max-width:calc(100vw - 20px)}.phase-two-gesture.collapsed{min-width:138px}.phase-two-next{left:10px;bottom:64px}.star-completion-dialog{padding:30px 20px 24px}.dialog-actions{flex-direction:column}.dialog-button{width:100%}}