@keyframes rise-in{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes splash-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes btn-pulse{0%,to{box-shadow:0 0 #c9a84c00}50%{box-shadow:0 0 28px 6px #c9a84c38}}@keyframes particle-float{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.7}80%{opacity:.2}to{opacity:0;transform:translateY(-140px) scale(.4)}}@keyframes ring-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes circle-pop{0%{opacity:0;transform:scale(.15)}60%{opacity:1;transform:scale(1.1)}78%{transform:scale(.94)}90%{transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes circle-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.045)}}@keyframes burst{0%{transform:scale(1)}35%{transform:scale(1.16)}65%{transform:scale(.96)}to{transform:scale(1)}}@keyframes conn-flow{0%{stroke-dashoffset:28}to{stroke-dashoffset:0}}@keyframes conn-appear{0%{opacity:0}to{opacity:1}}@keyframes enter-appear{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes enter-glow{0%,to{box-shadow:0 0 20px #c9a84c4d,0 0 40px #c9a84c1a}50%{box-shadow:0 0 40px #c9a84c8c,0 0 80px #c9a84c33}}@keyframes sheet-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sheet-out{0%{transform:translateY(0)}to{transform:translateY(102%)}}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes backdrop-out{0%{opacity:1}to{opacity:0}}@keyframes welcome-in{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes pillar-rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes crest-glow{0%,to{filter:drop-shadow(0 0 6px rgba(201,168,76,.4))}50%{filter:drop-shadow(0 0 16px rgba(201,168,76,.8))}}@keyframes complete-ring-pulse{0%,to{opacity:.35}50%{opacity:.75}}.join-root{min-height:100dvh;background:#0a0806;overflow:hidden;position:relative}.splash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.splash--out{animation:splash-out .55s cubic-bezier(.4,0,1,1) forwards}.splash-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 65% at 50% 38%,#1c1610,#0a0806 65%);pointer-events:none}.splash-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;width:2px;height:2px;border-radius:50%;background:#c9a84c8c;animation:particle-float calc(5s + var(--i) * .4s) ease-in-out calc(var(--i) * .45s) infinite;left:calc(8% + var(--i) * 7.2%);bottom:15%}.splash-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:2rem;user-select:none}.crest-wrap{color:#c9a84c;margin-bottom:1.4rem;animation:rise-in .9s ease .05s both,crest-glow 3s ease-in-out 1.2s infinite}.wordmark{font-family:Playfair Display,serif;font-weight:500;font-size:clamp(2.6rem,10vw,3.4rem);letter-spacing:.16em;color:#ede8e0;text-transform:uppercase;line-height:1;margin-bottom:.25rem;animation:rise-in .9s ease .22s both}.flourish{width:200px;height:auto;margin-bottom:1.4rem;animation:rise-in .9s ease .34s both}.splash-sub{font-family:DM Sans,sans-serif;font-size:.82rem;font-weight:300;letter-spacing:.1em;color:#c9a84ca6;margin-bottom:2.8rem;animation:rise-in .9s ease .46s both}.begin-btn{font-family:Playfair Display,serif;font-size:.88rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:#c9a84c;background:transparent;border:1px solid rgba(201,168,76,.45);padding:.8rem 2.6rem;border-radius:100px;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;animation:rise-in .9s ease .62s both,btn-pulse 2.8s ease-in-out 1.6s infinite}.begin-btn:hover{background:#c9a84c12;border-color:#c9a84cd9}.begin-btn:active{transform:scale(.97)}.ring-screen{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:1.5rem 1rem calc(env(safe-area-inset-bottom) + 1.5rem);background:radial-gradient(ellipse 90% 70% at 50% 35%,#1a130c,#0a0806 60%);opacity:0}.ring-screen--in{animation:ring-appear .5s ease .05s both;opacity:1}.ring-hint{font-size:.72rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#c9a84c8c;margin-bottom:1.8rem;text-align:center;min-height:1.2em;transition:opacity .3s}.ring-container{position:relative;width:min(360px,calc(100vw - 1.5rem));aspect-ratio:360 / 340;margin:0 auto}.conn-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.conn-line{stroke:#c9a84c1a;stroke-width:1;stroke-dasharray:6 9;transition:stroke .6s,stroke-width .6s,opacity .6s}.ring-screen--in .conn-line{animation:conn-appear .8s ease .6s both}.conn-line--active{stroke:#c9a84c66;stroke-width:1.5;animation:conn-flow 2.5s linear infinite!important}.ring-screen--complete .conn-line{stroke:#c9a84c8c;stroke-width:1.5;animation:conn-flow 1.8s linear infinite,complete-ring-pulse 2s ease-in-out infinite!important}.circle-node{position:absolute;width:27.8%;aspect-ratio:1;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .1s;padding:0;border:none;background:transparent;-webkit-tap-highlight-color:transparent}.circle-node--you{top:.8%;left:36.1%}.circle-node--palace{top:55.8%;left:6.1%}.circle-node--butler{top:55.8%;left:66.1%}.ring-screen--in .circle-node{animation:circle-pop .65s cubic-bezier(.34,1.56,.64,1) var(--delay) both}.ring-screen--in .circle-node.circle-node--not-filled{animation:circle-pop .65s cubic-bezier(.34,1.56,.64,1) var(--delay) both,circle-breathe 4.5s ease-in-out calc(var(--delay) + .9s) infinite}.circle-body{width:100%;height:100%;border-radius:50%;background:#ffffff08;border:1.5px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:background .4s,border-color .4s,box-shadow .4s;color:#fff6;position:relative;overflow:hidden}.circle-body:after{content:"";position:absolute;inset:2px;border-radius:50%;background:linear-gradient(140deg,rgba(255,255,255,.06) 0%,transparent 55%);pointer-events:none}.circle-node:hover .circle-body{border-color:#ffffff40;background:#ffffff0d;box-shadow:0 0 20px var(--glow, rgba(201,168,76,.2))}.circle-node:active .circle-body{transform:scale(.94);transition:transform .1s}.circle-node--filled .circle-body{border-color:var(--color);background:#ffffff0d;box-shadow:0 0 0 1px var(--color),0 0 20px var(--glow),inset 0 0 16px #0003;color:#ffffffd9}.ring-screen--complete .circle-node .circle-body{animation:burst .4s ease both}.ring-screen--complete .circle-node--you .circle-body{animation-delay:0s}.ring-screen--complete .circle-node--palace .circle-body{animation-delay:.08s}.ring-screen--complete .circle-node--butler .circle-body{animation-delay:.16s}.circle-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s}.circle-node:hover .circle-icon{transform:scale(1.08)}.circle-display-name{font-size:.6rem;font-weight:500;letter-spacing:.05em;color:var(--color);text-align:center;max-width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.circle-label{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);font-size:.68rem;font-weight:400;letter-spacing:.06em;color:#ffffff59;white-space:nowrap;transition:color .3s}.circle-node--filled .circle-label{color:#fff9}.enter-zone{margin-top:3.2rem;opacity:0;pointer-events:none;transition:opacity .1s}.enter-zone--in{animation:enter-appear .6s cubic-bezier(.34,1.56,.64,1) .1s both;pointer-events:auto}.enter-btn{font-family:Playfair Display,serif;font-size:.9rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#0a0806;background:linear-gradient(135deg,#d4a840,#c9a84c 50%,#b8943e);border:none;padding:.9rem 2.8rem;border-radius:100px;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .2s,box-shadow .2s;animation:enter-glow 2.5s ease-in-out .4s infinite}.enter-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px #c9a84c66}.enter-btn:active{transform:scale(.97) translateY(0)}.sheet-backdrop{position:fixed;inset:0;z-index:50;background:#0000;display:flex;align-items:flex-end;animation:backdrop-in .3s ease forwards}.sheet-backdrop--in{background:#000000a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.sheet{width:100%;max-height:85dvh;background:#131010;border-top-left-radius:24px;border-top-right-radius:24px;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);position:relative;padding-bottom:calc(env(safe-area-inset-bottom) + 1rem)}.sheet--in{animation:sheet-in .42s cubic-bezier(.34,1.26,.64,1) forwards}.sheet--out{animation:sheet-out .32s cubic-bezier(.4,0,.6,1) forwards}.sheet-handle{width:36px;height:4px;background:#ffffff1f;border-radius:2px;margin:12px auto 0}.sheet-close{position:absolute;top:10px;right:14px;width:32px;height:32px;border-radius:50%;background:#ffffff12;border:none;color:#ffffff73;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}.sheet-close:hover{background:#ffffff1f;color:#fffc}.sheet-accent{height:2px;background:linear-gradient(90deg,transparent,var(--color, #C9A84C),transparent);margin:16px 0 0;opacity:.6}.form-body{padding:1.2rem 1.5rem 1.8rem;display:flex;flex-direction:column;align-items:center}.form-icon{margin-bottom:.8rem;opacity:.9}.form-title{font-family:Playfair Display,serif;font-weight:500;font-size:1.35rem;color:#ede8e0;letter-spacing:.02em;margin-bottom:.3rem;text-align:center}.form-sub{font-size:.78rem;font-weight:300;color:#ede8e073;letter-spacing:.04em;margin-bottom:1.8rem;text-align:center}.form-fields{width:100%;display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.8rem}.field{display:flex;flex-direction:column;gap:.45rem}.field-label{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#ede8e066}.field-input{width:100%;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.75rem 1rem;font-family:DM Sans,sans-serif;font-size:.95rem;color:#ede8e0;outline:none;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none}.field-input::placeholder{color:#ede8e033}.field-input:focus{border-color:var(--focus-color, rgba(201,168,76,.6));background:#ffffff12;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus-color, #C9A84C) 15%,transparent)}.pill-group{display:flex;gap:.5rem}.pill{flex:1;padding:.55rem .5rem;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;font-family:DM Sans,sans-serif;font-size:.82rem;font-weight:400;color:#ede8e080;cursor:pointer;transition:all .18s;text-align:center}.pill:hover{background:#ffffff14;color:#ede8e0cc}.pill--active{border-color:var(--color, #C9A84C);background:color-mix(in srgb,var(--color, #C9A84C) 14%,transparent);color:var(--color, #C9A84C)}.tone-desc{font-size:.72rem;font-weight:300;color:#ede8e059;letter-spacing:.02em;margin-top:.5rem;text-align:center;min-height:1em;transition:opacity .2s}.save-btn{width:100%;padding:.9rem;border-radius:12px;border:none;background:var(--color, #C9A84C);color:#0a0806;font-family:Playfair Display,serif;font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:opacity .2s,transform .15s,box-shadow .2s}.save-btn:hover:not(:disabled){box-shadow:0 4px 20px color-mix(in srgb,var(--color, #C9A84C) 45%,transparent);transform:translateY(-1px)}.save-btn:active:not(:disabled){transform:scale(.98)}.save-btn:disabled{opacity:.3;cursor:not-allowed}.welcome{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0806;opacity:0;z-index:100}.welcome--in{animation:welcome-in .7s ease forwards}.welcome-bg{position:absolute;inset:0;background:radial-gradient(ellipse 85% 70% at 50% 40%,#1e1610,#0a0806 65%)}.welcome-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem 1.5rem;gap:0}.crest-wrap--big{color:#c9a84c;margin-bottom:1.6rem;animation:rise-in .8s ease .15s both,crest-glow 3s ease-in-out 1s infinite}.welcome-label{font-size:.72rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:#c9a84c99;margin-bottom:.9rem;animation:rise-in .8s ease .3s both}.welcome-name{font-family:Playfair Display,serif;font-size:clamp(2rem,8vw,2.8rem);font-weight:500;color:#ede8e0;letter-spacing:.04em;margin-bottom:.3rem;animation:rise-in .8s ease .42s both}.welcome-palace{font-family:Playfair Display,serif;font-style:italic;font-size:1rem;color:#c9a84cb3;letter-spacing:.06em;margin-bottom:2.2rem;animation:rise-in .8s ease .52s both}.welcome-pillars{display:flex;gap:1rem;margin-bottom:2.8rem;flex-wrap:wrap;justify-content:center}.welcome-pillar{display:flex;flex-direction:column;align-items:center;gap:4px;padding:.7rem 1.1rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--pc) 30%,transparent);background:color-mix(in srgb,var(--pc) 8%,transparent);animation:pillar-rise .7s ease both;min-width:80px}.welcome-pillar:nth-child(1){animation-delay:.62s}.welcome-pillar:nth-child(2){animation-delay:.72s}.welcome-pillar:nth-child(3){animation-delay:.82s}.pillar-icon{display:flex;align-items:center;justify-content:center;margin-bottom:4px;opacity:.85}.pillar-label{font-size:.6rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--pc);opacity:.75}.pillar-name{font-size:.85rem;font-weight:400;color:#ede8e0d9}.enter-btn--gold{animation:rise-in .8s ease .95s both,enter-glow 2.5s ease-in-out 1.5s infinite}
