/* MOONRIBBON -- made to be delightful, not restrained. */
:root{color-scheme:dark;--font-playful:"Hoefler Text","Baskerville","GFS Baskerville",Georgia,serif;--font-playful-body:"Optima","Avenir Next","Gill Sans","Helvetica Neue",sans-serif;--font-story:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;--font-bold:"Optima","Avenir Next","Gill Sans","Helvetica Neue",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;min-height:100vh;color:var(--text);background:var(--background);font-family:var(--body-font);font-size:16px;overflow-x:hidden}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #ffeb94;outline-offset:4px}
[hidden]{display:none!important}
body[data-theme="midnight"]{--background:#120b19;--panel:#24162b;--panel-strong:#31182b;--sidebar:#1d1022;--hero-left:#401527;--hero-right:#1b2732;--text:#fff2dc;--muted:#dbbda8;--gold:#ffca59;--gold-light:#fff0ab;--pink:#f37b9b;--green:#347353;--ruby:#982f48;--border:#a06b45;--glow:rgba(248,151,52,.25)}
body[data-theme="emerald"]{--background:#091917;--panel:#133128;--panel-strong:#254734;--sidebar:#0d241d;--hero-left:#254634;--hero-right:#113b43;--text:#fff4df;--muted:#d2d3af;--gold:#fac35a;--gold-light:#f7e2a1;--pink:#e995ad;--green:#5b9b68;--ruby:#9d3952;--border:#96804f;--glow:rgba(129,231,113,.20)}
body[data-theme="garnet"]{--background:#1c0a10;--panel:#37131f;--panel-strong:#551a2b;--sidebar:#270f1b;--hero-left:#641728;--hero-right:#36152e;--text:#fff3db;--muted:#dec2b0;--gold:#ffd46b;--gold-light:#fff1a9;--pink:#fa94a6;--green:#466d45;--ruby:#ab3654;--border:#b57a4a;--glow:rgba(250,139,56,.25)}
body[data-font="playful"]{--body-font:var(--font-playful-body);--display-font:var(--font-playful)}
body[data-font="storybook"]{--body-font:var(--font-story);--display-font:var(--font-story)}
body[data-font="bold"]{--body-font:var(--font-bold);--display-font:var(--font-bold)}
.sky-dots{pointer-events:none;position:fixed;inset:0;z-index:-2;background:
radial-gradient(circle at 17% 24%,rgba(216,130,110,.09) 0 1px,transparent 2px),radial-gradient(circle at 79% 66%,rgba(255,216,139,.12) 0 2px,transparent 3px),radial-gradient(circle at 92% 15%,rgba(255,227,152,.09) 0 2px,transparent 3px),radial-gradient(circle at 78% 12%,rgba(137,198,162,.12),transparent 34%),radial-gradient(circle at 15% 75%,rgba(133,37,79,.15),transparent 31%);background-size:109px 119px,193px 163px,167px 197px,auto,auto;animation:starsDrift 38s linear infinite}
.sky-dots:before,.sky-dots:after{content:"";position:absolute;inset:0;pointer-events:none}
.sky-dots:before{opacity:.24;background:repeating-linear-gradient(135deg,transparent 0 65px,rgba(248,186,106,.055) 66px 67px,transparent 68px 130px)}
.sky-dots:after{background:radial-gradient(circle at 55% 45%,transparent 42%,rgba(6,3,12,.22) 100%)}
@keyframes starsDrift{to{background-position:109px -119px,-193px 163px,167px -197px,0 0,0 0}}

/* THE FULL-WIDTH DESKTOP SHELL */
.app-shell{display:grid;grid-template-columns:clamp(255px,19vw,324px) minmax(0,1fr);min-height:100vh;width:100%}
.sidebar{position:sticky;top:0;align-self:start;height:100dvh;min-height:610px;display:flex;flex-direction:column;padding:29px 16px 23px;background:linear-gradient(152deg,rgba(104,33,52,.22),transparent 45%),linear-gradient(180deg,var(--sidebar),#120f1b 95%);border-right:3px solid #ac743e;box-shadow:inset -9px 0 rgba(9,7,14,.35),9px 0 24px rgba(0,0,0,.16);overflow-x:hidden;overflow-y:auto;isolation:isolate;z-index:20}
.sidebar:before,.sidebar:after{position:absolute;content:"";pointer-events:none;z-index:-1;left:8px;right:8px;border:1px solid rgba(255,204,114,.35);height:10px}
.sidebar:before{top:8px;border-bottom:none}.sidebar:after{bottom:8px;border-top:none}
.sidebar__crest{height:74px;display:grid;place-items:center;position:relative;filter:drop-shadow(0 0 12px rgba(255,204,94,.20))}
.sidebar__crescent{position:relative;display:block;width:52px;height:52px;background:linear-gradient(115deg,#f0a63c,#fff6bc 50%,#bf701d);border-radius:50%;box-shadow:0 0 20px rgba(255,187,66,.27);transform:rotate(-25deg)}
.sidebar__crescent:after{content:"";position:absolute;top:-7px;left:17px;width:51px;height:51px;border-radius:50%;background:var(--sidebar)}
.sidebar__star{position:absolute;left:calc(50% - 33px);bottom:3px;color:var(--gold);font-size:28px;animation:twinkle 4s ease-in-out infinite}
.sidebar__brand{text-align:center;font-family:var(--display-font);font-size:clamp(26px,2.15vw,35px);font-weight:400;letter-spacing:-1.2px;color:var(--gold);text-shadow:0 3px #7e2e2c,0 0 17px rgba(255,186,72,.3)}
.sidebar__brand span{display:block;color:var(--muted);font-size:15px;letter-spacing:2px;margin-top:-2px;text-shadow:none}
.sidebar__divider{display:flex;align-items:center;gap:10px;margin:20px 12px;color:var(--gold);justify-content:center;font-size:15px}
.sidebar__divider:before,.sidebar__divider:after{content:"";height:2px;flex:1;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.sidebar__nav{display:grid;gap:10px}.sidebar__bottom{margin-top:auto;display:grid;gap:7px;padding-top:10px}
.nav-item{position:relative;display:flex;gap:13px;align-items:center;min-height:51px;padding:8px 16px;border:2px solid rgba(235,169,81,.25);border-radius:12px 18px 12px 18px;background:linear-gradient(125deg,rgba(252,196,94,.045),rgba(252,150,159,.024));color:var(--text);font-weight:400;font-size:clamp(14px,1.04vw,17px);text-shadow:0 1px rgba(0,0,0,.3);box-shadow:inset 0 1px rgba(255,230,167,.09),0 4px 0 rgba(0,0,0,.20);transition:color .2s,background .2s,border-color .2s;isolation:isolate}
.nav-item:before{content:"";position:absolute;inset:3px;border:1px dashed rgba(255,226,154,.13);border-radius:10px 15px 10px 15px;pointer-events:none}
.nav-item__glyph{display:grid;place-items:center;min-width:28px;width:28px;height:28px;border-radius:50%;background:rgba(255,194,95,.12);font-size:21px;color:var(--gold);line-height:1}
.nav-item__spark{margin-left:auto;color:var(--gold);font-size:12px;opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s}
.nav-item:hover,.nav-item:focus-visible{color:var(--gold-light);background:linear-gradient(130deg,rgba(182,61,88,.32),rgba(36,108,65,.23));border-color:var(--gold);animation:wobble .52s ease-in-out 1 both}
.nav-item:hover .nav-item__spark,.nav-item:focus-visible .nav-item__spark{opacity:1;transform:scale(1.3)}
.nav-item.is-current{background:linear-gradient(115deg,#7d2543,#3c382c 84%);color:#fff0b4;border-color:var(--gold);box-shadow:inset 0 1px rgba(255,243,190,.24),0 4px 0 #100d18,0 0 22px rgba(246,167,75,.15)}
.sidebar__refresh{display:none;text-align:left;width:100%}
.main-stage{min-width:0;width:100%;padding:clamp(16px,2.5vw,48px);position:relative}
.mobile-header{display:none}.sidebar-shade{display:none}

/* DECORATIVE FRAMES THAT LOOK LIKE AN ENCHANTED ARCADE */
.ornate-frame{position:relative;isolation:isolate;border:3px solid var(--gold);border-radius:22px 34px 22px 34px;box-shadow:0 0 0 5px rgba(14,11,20,.85),0 0 0 7px var(--border),0 25px 50px rgba(0,0,0,.34),inset 0 0 45px rgba(0,0,0,.30)}
.ornate-frame:before{content:"";pointer-events:none;position:absolute;z-index:2;inset:9px;border:1.5px solid rgba(255,216,136,.40);border-radius:14px 25px 14px 25px}
.ornate-frame:after{content:"✦";position:absolute;z-index:3;right:21px;top:8px;color:var(--gold);text-shadow:0 0 10px rgba(255,214,138,.8);font-size:18px;animation:twinkle 3s ease-in-out infinite}

/* THE BIG, UNAPOLOGETICALLY MAGICAL HERO */
.hero{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.9fr);align-items:center;min-height:clamp(480px,58vh,760px);overflow:hidden;padding:clamp(24px,4.3vw,72px);background:
radial-gradient(ellipse at 76% 58%,rgba(228,117,83,.22),transparent 43%),radial-gradient(circle at 75% 25%,rgba(58,127,94,.24),transparent 40%),linear-gradient(127deg,var(--hero-left),var(--hero-right));
}
.hero:before{inset:13px;z-index:1;border-color:rgba(255,205,123,.47)}
.hero:after{right:25px;top:14px}
.hero__ray{position:absolute;inset:-110px;pointer-events:none;opacity:.20;background:repeating-conic-gradient(from 3deg at 75% 50%,transparent 0 12deg,rgba(255,215,148,.25) 13deg 14deg,transparent 15deg 31deg);mask-image:radial-gradient(ellipse at 75% 50%,black 10%,transparent 75%);animation:slowTurn 80s linear infinite}
.hero__ray--two{opacity:.12;transform:rotate(13deg);animation-direction:reverse;animation-duration:100s}
.hero__copy{position:relative;z-index:4;align-self:center;min-width:0}
.hero__eyebrow{display:flex;align-items:center;gap:18px;max-width:250px;justify-content:center;color:var(--gold);font-size:23px;margin-bottom:17px;filter:drop-shadow(0 0 5px #edb46588)}
.hero__eyebrow span{height:3px;width:72px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hero__title{margin:0;position:relative;line-height:.86;font-size:clamp(65px,6.9vw,150px);font-family:var(--display-font);font-weight:400;letter-spacing:-.06em;filter:drop-shadow(0 8px 0 rgba(65,14,34,.75))}
.hero__word{display:block;white-space:nowrap;color:var(--gold-light);-webkit-text-stroke:0;text-shadow:2px 2px 0 #b25536,4px 5px 0 #7d213b,0 0 28px rgba(252,187,88,.26)}
.hero__word--second{color:var(--gold);padding-left:.15em;font-size:.86em;margin-top:.12em}
.hero__word>span{display:inline-block;opacity:0;animation:popLetter .86s cubic-bezier(.15,.7,.2,1.15) both;animation-delay:calc(var(--n,0) * .095s + .15s);transform-origin:bottom center}
.hero__word--second>span{animation-delay:calc(var(--n,0) * .093s + .49s)}
.hero__word>span:nth-child(1){--n:0}.hero__word>span:nth-child(2){--n:1}.hero__word>span:nth-child(3){--n:2}.hero__word>span:nth-child(4){--n:3}.hero__word>span:nth-child(5){--n:4}.hero__word>span:nth-child(6){--n:5}
.hero__title.intro-complete .hero__word>span{animation:none;opacity:1;transform:none}
.hero__title.intro-complete:hover .hero__word>span{animation:letterDance .6s ease-in-out 1 both;opacity:1}
.hero__domain{font-family:var(--display-font);font-size:clamp(23px,2.45vw,49px);color:#ffe0a1;letter-spacing:.05em;text-shadow:0 3px 0 #8c3850;margin-top:16px;margin-left:38%;transform:rotate(-7deg);animation:domainGlide .8s 1.4s backwards}
.hero__domain span{display:inline-block;animation:twinkle 2s ease-in-out infinite}
.hero__button{margin-top:clamp(25px,3vw,40px);margin-left:9px}
.hero__art-wrap{position:relative;z-index:3;display:grid;place-items:center;min-width:0;align-self:stretch}
.hero__halo{position:absolute;width:min(42vw,690px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,194,95,.26) 0 19%,rgba(235,122,82,.10) 49%,transparent 66%);filter:blur(5px);animation:haloBreathe 5s ease-in-out infinite}
.hero__art{display:block;position:relative;width:min(100%,min(35vw,660px));max-height:clamp(440px,56vh,700px);object-fit:contain;filter:drop-shadow(0 0 13px rgba(255,186,75,.55)) drop-shadow(0 30px 30px rgba(0,0,0,.33));animation:moonFloat 5.4s ease-in-out infinite;transform-origin:center center;user-select:none}
.hero__art-wrap:hover .hero__art{animation:moonHappy .65s ease-in-out 1}
.hero__spark{position:absolute;z-index:2;color:var(--gold-light);text-shadow:0 0 15px rgba(255,215,111,.8);animation:twinkle 2.9s ease-in-out infinite;pointer-events:none}
.hero__spark--one{top:10%;left:48%;font-size:30px}.hero__spark--two{top:22%;right:11%;font-size:35px;animation-delay:1s}.hero__spark--three{bottom:16%;left:44%;font-size:23px;animation-delay:.6s}.hero__spark--four{right:28%;bottom:9%;font-size:30px;animation-delay:1.4s}
.hero__ornament{position:absolute;bottom:22px;z-index:4;color:rgba(249,198,111,.7);letter-spacing:12px;font-size:13px;pointer-events:none}.hero__ornament--left{left:20px}.hero__ornament--right{right:10px}

/* THE WORLD-CARDS, ALL CLICKABLE AND ALL UP TO MISCHIEF */
.worlds{margin-top:clamp(33px,4.5vw,75px);padding-bottom:60px}
.section-ribbon{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,46px);margin:10px 4px 26px}
.section-ribbon:before,.section-ribbon:after{content:"";height:3px;flex:1;max-width:280px;background:linear-gradient(90deg,transparent,var(--gold),var(--ruby));border-radius:9px;filter:drop-shadow(0 0 8px var(--glow))}
.section-ribbon:after{transform:scaleX(-1)}
.section-ribbon h2{font-family:var(--display-font);font-size:clamp(34px,3.1vw,63px);letter-spacing:-.035em;line-height:1.1;margin:0;text-align:center;color:var(--gold);text-shadow:2px 3px 0 #762443,0 0 18px rgba(255,207,85,.19)}
.section-ribbon>span{color:var(--gold);font-size:22px;animation:twinkle 3s ease-in-out infinite}
.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(13px,1.65vw,28px)}
.portal{--card1:#651d3a;--card2:#263a38;position:relative;min-width:0;min-height:clamp(188px,17vw,310px);display:flex;align-items:end;overflow:hidden;border:3px solid #d5a256;border-radius:17px 31px 17px 31px;padding:clamp(18px,2.3vw,39px);background:radial-gradient(circle at 78% 40%,rgba(255,225,149,.13),transparent 30%),repeating-conic-gradient(from 6deg at 78% 42%,transparent 0 17deg,rgba(255,200,130,.045) 18deg 21deg,transparent 22deg 38deg),linear-gradient(130deg,var(--card1),var(--card2));box-shadow:inset 0 0 26px #0006,inset 0 0 0 7px #fbd88919,0 8px 0 #0b0b13,0 16px 35px #0006;isolation:isolate;transition:border-color .2s,filter .2s}
.portal:before{content:"";position:absolute;inset:10px;border:2px solid #f5d08b70;border-radius:9px 22px 9px 22px;pointer-events:none}
.portal:after{content:"✦";position:absolute;z-index:2;top:12px;left:19px;color:#ffe5a0;font-size:20px;text-shadow:0 0 13px #f9c276;animation:twinkle 3s ease-in-out infinite}
.portal--wide{grid-column:span 2}.portal--fanfiction{--card1:#762544;--card2:#283e33}.portal--sims{--card1:#314470;--card2:#69416e}.portal--turnips{--card1:#745126;--card2:#732b47}.portal--games{--card1:#235743;--card2:#343169}.portal--art{--card1:#5f3777;--card2:#3c526b}
.portal__shimmer{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,rgba(255,249,208,.12) 44%,transparent 58%);transform:translateX(-150%) skewX(-16deg);transition:transform .6s ease}
.portal__glyph{position:absolute;right:7%;top:50%;transform:translateY(-58%) rotate(-8deg);font-family:var(--display-font);font-size:clamp(104px,13vw,235px);font-weight:400;line-height:1;color:rgba(255,207,117,.21);text-shadow:0 0 24px #f8bb5e1a;pointer-events:none;transition:color .25s}
.portal__label{position:relative;z-index:2;max-width:80%;font-size:clamp(26px,2.5vw,53px);font-family:var(--display-font);font-weight:400;line-height:1.05;color:#fff2c5;text-shadow:2px 3px 0 #541b2b,0 0 16px rgba(255,199,111,.19)}
.portal__arrow{position:absolute;z-index:3;right:23px;bottom:17px;display:grid;place-items:center;width:37px;height:37px;border-radius:50%;font-size:26px;background:#ffcd6980;color:#38212c;border:2px solid #ffefbd;box-shadow:0 3px 0 #431b25}
.portal:hover,.portal:focus-visible{animation:portalWiggle .57s ease-in-out 1 both;border-color:#fff0b0;filter:saturate(1.16)}
.portal:hover .portal__shimmer,.portal:focus-visible .portal__shimmer{transform:translateX(135%) skewX(-16deg)}
.portal:hover .portal__glyph,.portal:focus-visible .portal__glyph{color:#ffdfa756}
.portal:active,.magic-button:active,.nav-item:active{transform:scale(.985)}

/* THE SETTINGS ARE A MENU, NOT FOUR FORMS OPEN AT ONCE */
.settings-page,.empty-realm{min-height:clamp(510px,75vh,800px);padding:clamp(26px,4.2vw,69px);background:radial-gradient(circle at 93% 16%,rgba(232,145,85,.18),transparent 31%),radial-gradient(circle at 14% 79%,rgba(55,135,101,.18),transparent 35%),linear-gradient(135deg,var(--panel-strong),var(--panel));overflow:hidden}
.settings-page:after,.empty-realm:after{top:9px}
.page-title-row{display:flex;align-items:center;gap:30px;margin-bottom:34px}
.page-title-row h1,.empty-realm h1{font-family:var(--display-font);font-size:clamp(43px,4.3vw,84px);margin:0;color:var(--gold);text-shadow:2px 4px #772741}
.page-title-row__star{font-size:28px;color:var(--gold);animation:twinkle 3s ease-in-out infinite}
.settings-list{display:grid;gap:15px;width:100%}
.settings-item{border:2px solid rgba(255,199,109,.48);border-radius:15px;background:rgba(19,16,25,.37);overflow:hidden;box-shadow:0 5px 0 rgba(0,0,0,.23)}
.settings-opener{display:flex;align-items:center;gap:15px;width:100%;min-height:75px;text-align:left;border:0;background:linear-gradient(90deg,rgba(130,41,65,.15),rgba(37,105,77,.12));color:var(--text);padding:15px clamp(14px,2vw,28px);font-family:var(--display-font);font-size:clamp(20px,1.7vw,30px);font-weight:400}
.settings-opener:hover{background:linear-gradient(90deg,rgba(147,41,64,.4),rgba(59,118,76,.35));animation:wobble .5s ease-in-out 1}
.settings-opener__icon{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;color:var(--gold);background:#e6af4c20;border:1px solid #e6af4c80;font-size:25px}
.settings-opener__arrow{margin-left:auto;font-size:36px;color:var(--gold);transition:transform .25s}
.settings-opener[aria-expanded="true"] .settings-opener__arrow{transform:rotate(180deg)}
.settings-panel{padding:24px clamp(14px,2vw,30px) 30px;border-top:1px solid #ffd88c70;animation:showPanel .27s ease both}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.theme-choice,.font-choice{padding:18px;border-radius:14px;border:2px solid #b48a6480;background:#291928;color:#fff1db;font-size:clamp(15px,1.1vw,20px);text-align:left;min-height:86px;display:flex;gap:10px;align-items:center;justify-content:space-between}
.theme-choice:hover,.font-choice:hover{animation:wobble .52s ease-in-out 1 both;border-color:var(--gold)}
.theme-choice.is-selected,.font-choice.is-selected{border-color:var(--gold);box-shadow:inset 0 0 0 2px #edcf8d80,0 0 17px var(--glow)}
.theme-choice__color{display:inline-block;flex-shrink:0;width:42px;height:42px;border-radius:50%;border:3px solid #ffcb67;box-shadow:0 3px 5px #0006}
.theme-choice--midnight .theme-choice__color{background:conic-gradient(#70223c 0 35%,#214e39 36% 67%,#ebc46b 68%)}
.theme-choice--emerald .theme-choice__color{background:conic-gradient(#25573c 0 45%,#15354a 46% 73%,#e8c06b 74%)}
.theme-choice--garnet .theme-choice__color{background:conic-gradient(#9a2d47 0 60%,#42192a 61% 75%,#f5ca69 76%)}
.font-choice--storybook{font-family:var(--font-story)}.font-choice--bold{font-family:var(--font-bold)}.font-choice--playful{font-family:var(--font-playful)}
.settings-form,.login-form{display:grid;gap:11px;max-width:620px}
.settings-form label,.login-form label{color:#f1d3a3;font-weight:400;font-size:16px}
.settings-form input,.login-form input{width:100%;min-height:53px;border:2px solid #9b6e4d;border-radius:11px;background:#130e19;color:#fff9f0;padding:12px 16px;outline:none;box-shadow:inset 0 3px 7px rgba(0,0,0,.36);font-size:18px}
.settings-form input:focus,.login-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #ffcc8050}
.settings-form .magic-button{margin-top:15px;justify-self:start}
.logout-form{display:flex}
.form-message{padding:15px 20px;margin:0 0 20px;border:2px solid #b9a35b;border-radius:12px;background:#33533a70;color:#fff5dc;font-weight:400}
.form-message--error{background:#772f3870;border-color:#ef8e8b}
.magic-button{display:inline-flex;align-items:center;justify-content:center;gap:17px;position:relative;min-height:54px;padding:12px 28px;border:3px solid #ffdd84;border-radius:10px 17px 10px 17px;background:linear-gradient(145deg,#f8d36d,#e8a83e);color:#412030;font-family:var(--display-font);font-weight:400;font-size:clamp(19px,1.3vw,24px);box-shadow:inset 0 1px #fff9bd,0 6px 0 #9c5631,0 11px 19px #0005;text-shadow:0 1px #fff1b8;transition:filter .2s;isolation:isolate}
.magic-button:after{content:"✦";position:absolute;right:-11px;top:-13px;color:#ffe09c;font-size:18px;text-shadow:0 0 10px #faedb9;animation:twinkle 2.4s infinite}
.magic-button:hover,.magic-button:focus-visible{animation:wobble .48s ease-in-out 1 both;filter:brightness(1.13)}
.magic-button:active{box-shadow:inset 0 1px #fff9bd,0 3px 0 #9c5631;translate:0 3px}
.empty-realm{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px}
.empty-realm h1{max-width:100%;line-height:1.05}
.empty-realm__star{font-size:78px;color:var(--gold);animation:twinkle 2s infinite}
.empty-realm__ornament{letter-spacing:7px;color:#efd08f}
.empty-realm p{font-size:23px;font-weight:400;margin:0 0 13px;color:var(--muted)}
.empty-realm .magic-button{margin-top:12px}

/* LOGIN -- NO PRIVATE CONTENT OR ORIGINAL ART BEFORE AUTHENTICATION */
.login-screen{display:grid;place-items:center;min-height:100dvh;padding:23px;background:radial-gradient(circle at 20% 20%,#63213c77,transparent 37%),radial-gradient(circle at 80% 80%,#1a604566,transparent 38%),var(--background)}
.login-wrap{display:grid;place-items:center;width:min(100%,660px)}
.login-card{width:100%;padding:clamp(35px,6vw,75px);background:radial-gradient(circle at 50% 0%,rgba(250,187,68,.17),transparent 45%),linear-gradient(160deg,#381d33,#181425);text-align:center;overflow:hidden}
.login-crescent{position:relative;display:block;margin:10px auto 18px;width:82px;height:82px;border-radius:50%;background:linear-gradient(135deg,#f7ae3a,#ffe798 53%,#b7752d);transform:rotate(-26deg);box-shadow:0 0 25px rgba(255,199,109,.18)}
.login-crescent:after{content:"";position:absolute;width:82px;height:82px;top:-13px;left:27px;border-radius:50%;background:#2e1a2e}
.login-title{margin:0 0 32px;font-family:var(--display-font);font-size:clamp(43px,7vw,75px);color:var(--gold);letter-spacing:-.06em;text-shadow:2px 4px 0 #7d2745,0 0 12px #e5a24d55}
.login-title span{font-size:.43em;letter-spacing:0;display:block;color:#f8dfaa;text-shadow:none}
.login-form{text-align:left;gap:14px;margin:0 auto}
.login-form .magic-button{margin-top:17px;justify-self:center;width:min(100%,275px)}
.login-card .glint{position:absolute;pointer-events:none;color:#ffe49c;text-shadow:0 0 8px #ffeabc;animation:twinkle 3s infinite}
.glint-a{top:19%;left:18%;font-size:27px}.glint-b{top:27%;right:16%;font-size:19px;animation-delay:1s!important}

/* MOTION MAKES THE WEBSITE ALIVE */
@keyframes twinkle{0%,100%{opacity:.45;transform:scale(.82) rotate(-9deg)}50%{opacity:1;transform:scale(1.24) rotate(11deg)}}
@keyframes moonFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-17px) rotate(2deg)}}
@keyframes moonHappy{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg) scale(1.03)}55%{transform:rotate(7deg) scale(1.08)}75%{transform:rotate(-2deg)}}
@keyframes haloBreathe{0%,100%{transform:scale(.91);opacity:.65}50%{transform:scale(1.18);opacity:1}}
@keyframes popLetter{0%{opacity:0;transform:translateY(-85px) scale(.35) rotate(-21deg)}60%{opacity:1;transform:translateY(13px) scale(1.12) rotate(7deg)}80%{transform:translateY(-5px) rotate(-3deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes letterDance{0%,100%{transform:translateY(0) rotate(0)}28%{transform:translateY(-9px) rotate(8deg)}68%{transform:translateY(5px) rotate(-6deg)}}
@keyframes domainGlide{from{opacity:0;transform:translate(-40px,30px) rotate(-20deg)}to{opacity:1;transform:translate(0,0) rotate(-7deg)}}
@keyframes slowTurn{to{transform:rotate(360deg)}}
@keyframes wobble{0%,100%{transform:rotate(0)}22%{transform:rotate(-1.35deg)}58%{transform:rotate(1.25deg)}83%{transform:rotate(-.5deg)}}
@keyframes portalWiggle{0%,100%{transform:rotate(0) translateY(0)}22%{transform:rotate(-.8deg) translateY(-2px)}56%{transform:rotate(.85deg) translateY(-4px)}81%{transform:rotate(-.3deg) translateY(-2px)}}
@keyframes showPanel{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes buttonPop{0%{transform:scale(1)}40%{transform:scale(.94) rotate(-2deg)}70%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1)}}
.pressed-pop{animation:buttonPop .32s ease-out!important}

/* TABLET, THEN SMALLER SCREENS */
@media(max-width:1250px) and (min-width:901px){
 .main-stage{padding:26px}.hero{padding:34px;min-height:510px}.hero__title{font-size:clamp(65px,7vw,95px)}.hero__art{width:min(100%,40vw)}
 .portal{padding:20px}.portal__label{font-size:clamp(24px,2.5vw,36px)}
}
@media(max-width:900px){
 .app-shell{display:block;min-height:100dvh}
 .mobile-header{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:16px;min-height:70px;padding:calc(11px + env(safe-area-inset-top)) 18px 11px;background:linear-gradient(95deg,#34162c,#1c222c);border-bottom:3px solid #c8944f;box-shadow:0 5px 15px #05050a88}
 .mobile-header__brand{flex:1;text-align:center;font-family:var(--display-font);font-size:clamp(22px,5vw,29px);font-weight:400;color:var(--gold);text-shadow:0 3px #742a40}.mobile-header__brand span{font-size:13px}
 .sidebar-toggle,.top-refresh{background:linear-gradient(#6c2b4b,#3a2440);color:#ffe39d;border:2px solid #e8b25d;border-radius:11px;box-shadow:0 4px 0 #150d1e;height:44px;width:46px;flex-shrink:0}
 .sidebar-toggle{display:grid;align-content:center;justify-items:center;gap:5px}
 .sidebar-toggle span{display:block;height:3px;width:23px;border-radius:3px;background:var(--gold)}
 .top-refresh{font-size:29px;line-height:1}
 .sidebar-toggle:active,.top-refresh:active{animation:wobble .28s}
 .sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;min-height:0;width:min(83vw,315px);transform:translateX(-106%);transition:transform .38s cubic-bezier(.2,.85,.3,1);z-index:60;padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom));box-shadow:18px 0 38px #0009}
 body.sidebar-open .sidebar{transform:translateX(0)}
 .sidebar-shade{display:block;position:fixed;inset:0;z-index:50;background:#03030bd1;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
 body.sidebar-open .sidebar-shade{opacity:1;visibility:visible}
 body.sidebar-open{overflow:hidden}
 .sidebar__refresh{display:flex}
 .main-stage{width:100%;padding:clamp(17px,3vw,30px);padding-bottom:calc(30px + env(safe-area-inset-bottom))}
 .hero{grid-template-columns:minmax(0,1fr) minmax(0,.75fr);min-height:450px;padding:clamp(18px,3.5vw,36px)}
 .hero__title{font-size:clamp(55px,8.6vw,100px)}
 .hero__art{width:min(100%,39vw)}
 .portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .portal--wide{grid-column:span 2}
 .portal{min-height:200px}.portal__label{font-size:clamp(27px,3.7vw,40px)}
 .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 .main-stage{padding:18px 16px 38px}
 .hero{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:680px;padding:45px 18px 20px;text-align:center;border-radius:18px 28px 18px 28px}
 .hero__copy{align-self:stretch;display:flex;flex-direction:column;align-items:center;z-index:5}
 .hero__eyebrow{margin-bottom:9px}
 .hero__title{font-size:clamp(65px,13vw,98px);letter-spacing:-.07em}
 .hero__domain{font-size:29px;margin:7px 0 0 100px}
 .hero__button{margin:19px 0 0}
 .hero__art-wrap{flex:1;min-height:0;width:100%;margin-top:0}
 .hero__art{width:min(92%,390px);max-height:370px}
 .hero__halo{width:330px}
 .hero__spark--one{top:4%;left:13%}.hero__spark--two{top:18%;right:13%}.hero__spark--three{bottom:24%;left:8%}.hero__spark--four{right:11%;bottom:16%}
 .hero__ornament{font-size:11px;bottom:10px}.hero__ornament--left{left:15px}.hero__ornament--right{right:4px}
 .section-ribbon{margin:10px 2px 24px;gap:11px}.section-ribbon h2{font-size:39px}.section-ribbon:before,.section-ribbon:after{width:20px}.section-ribbon>span{font-size:14px}
 .portal-grid{grid-template-columns:minmax(0,1fr);gap:19px}
 .portal,.portal--wide{grid-column:auto;min-height:205px;padding:25px 26px}.portal__label{font-size:36px}.portal__glyph{font-size:145px}
 .settings-page,.empty-realm{padding:45px 19px;min-height:calc(100dvh - 115px)}
 .page-title-row{gap:15px;justify-content:center}.page-title-row h1{font-size:52px}
 .choice-grid{grid-template-columns:minmax(0,1fr)}
 .settings-opener{font-size:22px;min-height:70px;padding:12px}
}
@media(max-width:390px){.hero{min-height:600px}.hero__title{font-size:58px}.hero__art{max-height:290px}.hero__domain{font-size:25px}.portal__label{font-size:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero__word>span{opacity:1!important}}

/* TYPE RESET v3 - no comic, bubble, bold, or 3D lettering. */
body {font-weight:400; line-height:1.46; font-synthesis:none}
.sidebar__brand,.mobile-header__brand {font-weight:400; font-style:normal; letter-spacing:.006em; text-shadow:0 0 15px rgba(255,195,83,.16)}
.sidebar__brand span,.mobile-header__brand span {font-style:normal;letter-spacing:.15em}
.nav-item {font-weight:400; letter-spacing:.015em; text-shadow:none}
.hero__title {font-weight:400; font-style:normal; letter-spacing:-.015em; line-height:1.02; filter:none}
.hero__word,.hero__word--second {-webkit-text-stroke:0; text-shadow:0 0 17px rgba(249,194,113,.22), 0 3px 18px rgba(0,0,0,.20)}
.hero__word--second {font-size:.92em; padding-left:.13em; margin-top:.005em}
.hero__domain {font-style:normal; font-weight:400;letter-spacing:.085em;text-shadow:0 0 10px rgba(255,211,137,.24)}
.section-ribbon h2 {font-weight:400;font-style:normal;letter-spacing:0;text-shadow:0 0 16px rgba(244,186,91,.16)}
.portal__label {font-weight:400;letter-spacing:0;line-height:1.12;text-shadow:0 2px 12px rgba(0,0,0,.33)}
.portal__glyph {font-weight:400}
.page-title-row h1,.empty-realm h1,.login-title {font-weight:400;letter-spacing:0;text-shadow:0 0 15px rgba(255,207,136,.22)}
.settings-opener,.theme-choice,.font-choice,.magic-button,.settings-form label,.login-form label,.empty-realm p {font-weight:400;letter-spacing:.01em}
.magic-button {text-shadow:none}
.hero__title,.sidebar__brand,.section-ribbon h2,.portal__label,.page-title-row h1,.login-title {font-synthesis:none}
/* Existing bespoke lettering motion, wiggling buttons, ornaments, and colours remain. */

/* Moonribbon: hand-painted portal illustrations (replaces old CSS glyphs) */
.portal__illustration {
  position:absolute;
  z-index:1;
  right:3.5%;
  top:50%;
  width:clamp(165px, 39%, 340px);
  height:83%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
  opacity:.96;
  filter:drop-shadow(0 9px 9px rgba(12,8,17,.38));
  transform:translateY(-50%) rotate(-5deg);
  transition:transform .38s cubic-bezier(.22,.85,.24,1.2),filter .38s ease;
}
.portal:hover .portal__illustration,
.portal:focus-visible .portal__illustration {
  transform:translateY(-53%) rotate(2deg) scale(1.035);
  filter:drop-shadow(0 12px 13px rgba(12,8,17,.48));
}
.portal--fanfiction .portal__illustration {width:clamp(185px, 32%, 360px);height:86%;right:6%;}
.portal--sims .portal__illustration {width:42%;height:87%;right:6%;}
.portal--turnips .portal__illustration {width:40%;height:90%;right:6%;}
.portal--games .portal__illustration {width:49%;height:75%;right:3%;transform:translateY(-50%) rotate(-7deg);}
.portal--games:hover .portal__illustration,
.portal--games:focus-visible .portal__illustration {transform:translateY(-53%) rotate(2deg) scale(1.035);}
.portal--art .portal__illustration {width:52%;height:86%;right:2%;}
@media(max-width:900px) {
  .portal--fanfiction .portal__illustration {width:34%;}
}
@media(max-width:600px) {
  .portal__illustration {width:43%;right:4%;height:85%;}
  .portal--fanfiction .portal__illustration {width:41%;right:4%;}
  .portal--sims .portal__illustration {width:38%;right:4%;}
  .portal--turnips .portal__illustration {width:36%;right:5%;}
  .portal--games .portal__illustration {width:49%;right:3%;}
  .portal--art .portal__illustration {width:51%;right:2%;}
}
@media(prefers-reduced-motion:reduce) {
  .portal__illustration {transition:none !important;}
}

/* Private personal timeline beneath My Worlds. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.moon-feed{width:100%;margin:55px 0 20px;scroll-margin-top:110px}
.feed-composer,.feed-post{position:relative;background:radial-gradient(circle at 100% 0%,rgba(156,69,83,.18),transparent 35%),linear-gradient(140deg,var(--panel-strong),var(--panel));border:2px solid rgba(246,192,98,.63);border-radius:21px;box-shadow:0 5px 0 #09070f,0 13px 30px #0004;overflow:hidden}
.feed-composer:before,.feed-post:before{content:"";position:absolute;inset:8px;border:1px solid rgba(243,194,112,.23);border-radius:14px;pointer-events:none}
.feed-composer{padding:clamp(19px,2.8vw,31px)}
.feed-composer textarea,.feed-edit textarea{display:block;resize:vertical;min-height:108px;width:100%;background:rgba(10,8,18,.35);border:1px solid rgba(255,218,142,.28);border-radius:12px;padding:15px 17px;color:var(--text);font:400 18px/1.55 var(--body-font);outline:none}
.feed-composer textarea::placeholder{color:var(--muted);opacity:.83}
.feed-composer textarea:focus,.feed-edit textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,203,98,.18)}
.feed-composer__actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:17px}
.feed-add-image{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid rgba(246,198,107,.75);border-radius:12px;color:var(--gold-light);background:#51314485;cursor:pointer;transition:background .2s ease}
.feed-add-image:hover,.feed-add-image:focus-within{background:#704050;animation:wobble .5s ease 1}
.feed-add-image input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.feed-add-image:focus-within{outline:3px solid #ffeb94;outline-offset:3px}
.feed-publish{min-width:125px}
.feed-selected{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px}
.feed-selected img{height:89px;width:89px;object-fit:contain;border:1px solid var(--border);border-radius:9px}
.feed-selected span{font-size:13px;color:var(--gold-light)}
.feed-timeline{display:grid;gap:19px;margin-top:24px}
.feed-post{padding:clamp(18px,2.6vw,30px)}
.feed-post__top{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.feed-post__avatar{display:grid;place-items:center;flex-shrink:0;width:45px;height:45px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);background:linear-gradient(135deg,#612c44,#224c3a);font-size:30px}
.feed-post__identity{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:12px;row-gap:2px}
.feed-post__author{font:normal 400 25px/1.2 var(--display-font);color:#ffe3a7}
.feed-post__identity time,.feed-post__edited{font:400 13px/1.4 var(--body-font);color:var(--muted)}
.feed-post__body{font:400 clamp(16px,1.35vw,19px)/1.65 var(--body-font);color:var(--text);overflow-wrap:anywhere;white-space:normal;margin:13px 0 18px}
.feed-photos{display:grid;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;margin:13px 0 16px}
.feed-photos--1{grid-template-columns:1fr}
.feed-photo{width:fit-content;max-width:100%;min-width:0;display:flex;justify-content:center;align-items:center;justify-self:center;overflow:hidden;padding:0;border:2px solid rgba(254,207,121,.44);border-radius:13px;background:#0c0a11;cursor:zoom-in}
.feed-photos--1 .feed-photo{max-width:min(100%,620px)}
.feed-photo img{display:block;width:auto;height:auto;max-width:100%;max-height:420px;object-fit:contain}
.feed-photo:hover,.feed-photo:focus-visible{box-shadow:0 0 16px rgba(255,203,110,.22)}
/* Private post actions: understated three-dot button with a click-only menu. */
.feed-post__options{position:relative;margin-left:auto;align-self:center;flex-shrink:0}
.feed-post__more{display:grid;place-items:center;width:36px;height:36px;padding:0 0 7px;border:1px solid transparent;border-radius:10px;color:var(--muted);background:transparent;font:400 30px/1 var(--body-font);cursor:pointer;transition:color .16s ease,background .16s ease,border-color .16s ease}
.feed-post__more:hover,.feed-post__more[aria-expanded="true"]{color:var(--gold-light);background:rgba(255,216,139,.1);border-color:rgba(255,216,139,.3)}
.feed-post__more:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.feed-post__menu{position:absolute;z-index:10;top:calc(100% + 5px);right:0;min-width:155px;padding:5px;border:1px solid rgba(255,214,135,.62);border-radius:12px;background:var(--panel-strong);box-shadow:0 12px 30px #0009}
.feed-post__menu form{margin:0}
.feed-post__menu-item{display:block;width:100%;padding:11px 13px;border:0;border-radius:7px;background:transparent;text-align:left;color:var(--text);font:400 16px/1.3 var(--body-font);cursor:pointer}
.feed-post__menu-item:hover,.feed-post__menu-item:focus-visible{background:rgba(255,216,139,.13);color:var(--gold-light)}
.feed-post__menu-item--delete{color:#f2a8a5}
.feed-post__menu-item--delete:hover,.feed-post__menu-item--delete:focus-visible{color:#ffd0c9;background:rgba(241,112,112,.13)}
.feed-edit{display:grid;gap:12px;padding-top:18px;margin-top:8px;border-top:1px solid #ecc57a40}
.feed-edit__existing{display:flex;flex-wrap:wrap;gap:12px}
.feed-edit__picture{display:grid;gap:5px;width:100px;font:400 13px var(--body-font);color:var(--text)}
.feed-edit__picture img{width:100px;height:82px;object-fit:contain;border-radius:8px;border:1px solid var(--border)}
.feed-edit__picture span{display:flex;align-items:center;gap:5px}
.feed-pages{display:flex;gap:18px;align-items:center;justify-content:center;color:var(--muted);margin-top:22px}
.feed-pages a{color:var(--gold-light);text-decoration:underline;text-underline-offset:4px}
.feed-lightbox{position:fixed;inset:0;max-width:min(96vw,1400px);max-height:94dvh;padding:12px;border:2px solid var(--gold);border-radius:17px;background:#130e1b;box-shadow:0 25px 100px #000c}
.feed-lightbox::backdrop{background:rgba(3,2,8,.88)}
.feed-lightbox img{display:block;max-width:calc(96vw - 40px);max-height:calc(94dvh - 35px);object-fit:contain;margin:auto}
.feed-lightbox__close{position:absolute;right:15px;top:15px;z-index:2;display:grid;place-items:center;width:45px;height:45px;border:1px solid var(--gold);border-radius:50%;color:#fff;background:#47283f;font-size:32px}
@media(max-width:600px){.moon-feed{margin-top:40px}.feed-composer,.feed-post{border-radius:16px}.feed-photos{gap:5px}.feed-photo img{max-height:340px}.feed-post__author{font-size:23px}.feed-post__identity{gap:3px 8px}}
@media(prefers-reduced-motion:reduce){.feed-photo img{transition:none}}
/* Moonribbon scrapbook: balanced, readable post cards rather than full-width entries. */
.feed-composer{max-width:920px;margin-inline:auto}
.feed-timeline{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;max-width:1120px;margin:25px auto 0;gap:21px}
.feed-timeline--masonry{grid-auto-rows:8px;grid-auto-flow:row dense;row-gap:17px}
.feed-post{min-width:0;padding:clamp(17px,1.8vw,24px);overflow:visible}
.feed-post:focus-within,.feed-post:has(.feed-post__more[aria-expanded="true"]){z-index:5}
.feed-post__top{gap:10px;margin-bottom:12px;min-width:0}
.feed-post__identity{min-width:0;column-gap:10px;row-gap:1px}
.feed-post__body{font-size:clamp(16px,1.15vw,18px);line-height:1.58;margin:12px 0 13px}
.feed-post__body--clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.feed-post__expand{display:inline-flex;align-items:center;margin:-3px 0 13px;padding:3px 0;border:0;border-bottom:1px solid rgba(245,199,113,.55);background:transparent;color:var(--gold-light);font:400 15px/1.3 var(--body-font);cursor:pointer}
.feed-post__expand[hidden]{display:none}
.feed-post__expand:hover,.feed-post__expand:focus-visible{color:#fff0c4;border-color:currentColor}
.feed-post__expand:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.feed-photo img{max-height:310px}
@media(max-width:1130px){.feed-timeline{grid-template-columns:1fr;max-width:640px}.feed-photo img{max-height:340px}}
@media(max-width:600px){.feed-timeline{gap:17px;margin-top:19px}.feed-post{padding:17px}.feed-post__body{font-size:16px}.feed-post__avatar{width:40px;height:40px}.feed-post__top{gap:9px}}


/* Owner profile photo: reusable avatar, never a separate public image asset. */
.feed-post__avatar{overflow:hidden}
.feed-post__avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.profile-settings{display:flex;align-items:center;gap:clamp(18px,3vw,36px);flex-wrap:wrap}
.profile-settings__avatar{display:grid;place-items:center;overflow:hidden;flex-shrink:0;width:clamp(106px,14vw,152px);height:clamp(106px,14vw,152px);border:3px solid var(--gold);border-radius:50%;background:linear-gradient(135deg,#612c44,#224c3a);color:var(--gold-light);font-size:80px;box-shadow:0 0 0 6px rgba(252,207,116,.10),0 9px 22px #0006}
.profile-settings__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.profile-settings__controls{display:grid;gap:13px;max-width:650px;min-width:0;flex:1}
.profile-settings__form{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.profile-settings__pick{font:400 19px/1.3 var(--body-font);color:var(--gold-light);white-space:nowrap}
.profile-settings__form input[type=file]{flex:1;min-width:200px;max-width:100%;font:400 15px/1.4 var(--body-font);color:var(--text)}
.profile-settings__form input[type=file]::file-selector-button{margin-right:10px;padding:10px 15px;border:1px solid var(--gold);border-radius:9px;background:rgba(74,41,63,.85);color:var(--gold-light);font:400 16px var(--body-font);cursor:pointer}
.profile-settings__form input[type=file]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.profile-settings__form .magic-button{font-size:19px;min-height:48px}
.profile-settings__remove button{padding:6px 0;border:0;border-bottom:1px solid currentColor;background:none;color:#f5b3b0;font:400 16px var(--body-font);cursor:pointer}
.profile-settings__remove button:hover,.profile-settings__remove button:focus-visible{color:#ffd9d5}
.profile-settings__hint{margin:0;color:var(--muted);font:400 14px/1.5 var(--body-font)}
@media(max-width:600px){.profile-settings{align-items:flex-start}.profile-settings__avatar{width:112px;height:112px}.profile-settings__controls{flex-basis:100%}}

/* BOTS: private Kindroid identities, for Chat and future Moonribbon pages. */
.bot-settings{display:grid;gap:20px}
.bot-settings__roster{display:grid;gap:13px}
.bot-settings__card,.bot-settings__add{border:1.5px solid rgba(255,207,124,.45);border-radius:14px;background:rgba(12,11,20,.42);overflow:hidden}
.bot-settings__summary,.bot-settings__add>summary{display:flex;align-items:center;gap:15px;padding:14px 18px;cursor:pointer;list-style:none;color:var(--text)}
.bot-settings__summary::-webkit-details-marker,.bot-settings__add>summary::-webkit-details-marker{display:none}
.bot-settings__summary:hover,.bot-settings__add>summary:hover{background:rgba(242,176,99,.09)}
.bot-settings__summary:focus-visible,.bot-settings__add>summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.bot-avatar{display:grid;place-items:center;flex-shrink:0;overflow:hidden;border:2px solid var(--gold);border-radius:50%;background:radial-gradient(circle at 28% 25%,#835045,#24172e 80%);color:var(--gold-light);font-family:var(--display-font)}
.bot-avatar img{width:100%;height:100%;object-fit:cover}
.bot-avatar--settings{width:62px;height:62px;font-size:29px}
.bot-settings__identity{min-width:0;display:flex;flex-direction:column;gap:5px}
.bot-settings__identity strong{font-family:var(--display-font);font-size:24px;font-weight:400;overflow-wrap:anywhere}
.bot-settings__identity small,.bot-settings__hint{font-size:13px;color:var(--muted);line-height:1.45}
.bot-settings__hint{margin:0}
.bot-settings__chevron{margin-left:auto;color:var(--gold);font-size:30px}
.bot-settings__card[open] .bot-settings__chevron{transform:rotate(180deg)}
.bot-settings__edit{padding:18px;border-top:1px solid rgba(255,205,126,.28)}
.bot-settings__form{max-width:720px;gap:16px}
.bot-settings__form label{display:grid;gap:8px}
.bot-settings__form input[type=file]{font-size:14px;min-height:0;padding:12px;width:100%;max-width:100%}
.bot-settings__form input[type=file]::file-selector-button{border:1px solid var(--gold);background:var(--panel-strong);padding:7px 10px;color:var(--text);border-radius:7px;cursor:pointer;margin-right:12px}
.bot-settings__check{display:flex!important;flex-direction:row;align-items:center;gap:10px!important}
.bot-settings__check input{width:19px!important;min-height:19px!important;height:19px;flex-shrink:0}
.bot-settings__actions{display:flex;align-items:center;flex-wrap:wrap;gap:23px}
.bot-settings__chat-link{color:var(--gold-light);text-decoration:underline;text-underline-offset:4px}
.bot-settings__delete{margin-top:24px;border-top:1px solid rgba(255,205,126,.22);padding-top:15px}
.bot-settings__delete button{border:0;background:transparent;color:#ffb6b8;text-decoration:underline;text-underline-offset:4px;padding:5px 0}
.bot-settings__add>summary{font-family:var(--display-font);font-size:23px;color:var(--gold-light);padding:20px}
.bot-settings__add>summary>span{color:var(--gold);font-size:25px}
.bot-settings__add .bot-settings__form{padding:4px 20px 25px}

/* CHAT: full-width conversation, with a discreet on-demand conversation drawer. */
.chat-page{background:radial-gradient(ellipse at 18% 0,rgba(122,39,75,.30),transparent 52%),linear-gradient(145deg,var(--panel-strong),var(--panel));padding:clamp(21px,2.2vw,31px);min-width:0}
.chat-layout{position:relative;z-index:4;min-width:0}
.chat-drawer-shade{position:absolute;z-index:7;inset:0;border-radius:17px;background:rgba(8,6,14,.63);cursor:pointer;animation:chat-shade-in .16s ease-out}
.chat-contacts{position:absolute;z-index:8;top:0;bottom:0;left:0;width:min(325px,calc(100% - 42px));display:flex;flex-direction:column;gap:10px;min-width:0;border:1.5px solid rgba(255,198,118,.70);border-radius:16px;padding:15px;background:linear-gradient(160deg,var(--panel-strong),var(--sidebar));box-shadow:9px 0 32px rgba(0,0,0,.55);overflow-y:auto;animation:chat-drawer-in .22s ease-out}
.chat-contacts__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 12px}
.chat-contacts__label{color:var(--gold);font-family:var(--display-font);font-size:23px}
.chat-contacts__close{flex:0 0 auto;width:37px;height:37px;border:1px solid rgba(255,210,140,.36);border-radius:10px;background:rgba(12,9,18,.38);color:var(--gold-light);font-size:27px;line-height:1}
.chat-contacts__close:hover,.chat-conversation__list-button:hover{background:rgba(255,211,134,.17);border-color:var(--gold)}
.chat-contact{display:flex;align-items:center;gap:10px;min-width:0;padding:9px;border:1.5px solid rgba(255,218,145,.25);background:rgba(23,17,33,.49);border-radius:12px;color:var(--text)}
.chat-contact:hover,.chat-contact.is-active{border-color:var(--gold);background:linear-gradient(125deg,rgba(143,45,74,.57),rgba(47,102,78,.35))}
.bot-avatar--contact{width:52px;height:52px;font-size:23px}
.chat-contact__name{font-size:16px;overflow-wrap:anywhere;min-width:0}
.chat-contacts__manage{margin-top:auto;color:var(--muted);padding:18px 7px 5px;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.chat-conversation{display:flex;flex-direction:column;min-width:0;min-height:520px;height:clamp(520px,calc(100dvh - 160px),970px);border:2px solid rgba(255,200,122,.58);border-radius:17px;overflow:hidden;background:rgba(17,12,24,.64);box-shadow:inset 0 0 25px #0004}
.chat-conversation__header{display:flex;align-items:center;gap:15px;padding:13px 18px;background:linear-gradient(100deg,rgba(122,38,65,.64),rgba(26,63,51,.49));border-bottom:1px solid rgba(255,209,145,.45)}
.chat-conversation__list-button{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1.5px solid rgba(255,208,126,.55);border-radius:11px;background:rgba(17,12,24,.36);color:var(--gold-light);font-size:27px;line-height:1}
.chat-conversation__who{min-width:0}
.chat-conversation__who h2{margin:0;color:var(--gold-light);font:400 26px/1.15 var(--display-font);overflow-wrap:anywhere}
.chat-conversation__who span{display:block;margin-top:5px;color:var(--muted);font-size:13px}
@keyframes chat-drawer-in{from{opacity:.6;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes chat-shade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.chat-contacts,.chat-drawer-shade{animation:none}}
.chat-messages{display:flex;flex-direction:column;gap:18px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px clamp(12px,2.2vw,28px);scrollbar-color:var(--border) transparent}
.chat-start{align-self:center;text-align:center;max-width:85%;margin:auto;color:var(--muted);font-family:var(--display-font);font-size:21px}
.chat-start span{display:block;font-size:37px;color:var(--gold)}
.chat-start p{margin:8px 0}
.chat-message{display:flex;gap:13px;max-width:min(84%,780px);align-self:flex-start;align-items:flex-end;min-width:0}
.chat-message--self{align-self:flex-end;flex-direction:row-reverse}
.chat-message__avatar{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border-radius:50%;border:2px solid var(--gold);background:#48233a;color:var(--gold);overflow:hidden}
.chat-message__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.chat-message__content{display:flex;flex-direction:column;min-width:0;gap:5px}
.chat-message--self .chat-message__content{align-items:flex-end}
.chat-message__name{font-size:12px;color:var(--muted);padding:0 7px}
.chat-message__bubble{padding:12px 16px;background:linear-gradient(140deg,rgba(65,42,68,.93),rgba(34,41,51,.93));border:1.5px solid rgba(255,204,132,.38);border-radius:15px 15px 15px 4px;box-shadow:0 4px 8px #0003;font-size:16px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;font-style:normal;color:var(--text)}
.chat-message--self .chat-message__bubble{background:linear-gradient(130deg,rgba(115,35,69,.94),rgba(77,44,62,.96));border-color:rgba(255,202,123,.57);border-radius:15px 15px 4px 15px}
/* In-thread Kindroid typing bubble: iMessage-style three-dot pulse. */
.chat-message__bubble--thinking{min-width:76px;min-height:49px;display:flex;justify-content:center;align-items:center}
.chat-typing-dots{display:inline-flex;align-items:center;gap:7px;height:22px}
.chat-typing-dots span{display:block;width:9px;height:9px;background:var(--gold-light);border-radius:50%;opacity:.5;animation:moonribbon-chat-dot 1.2s ease-in-out infinite}
.chat-typing-dots span:nth-child(2){animation-delay:.15s}
.chat-typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes moonribbon-chat-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.chat-typing-dots span{animation:none;opacity:.9}}
.chat-compose{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:14px 16px 16px;border-top:1px solid rgba(255,214,144,.4);background:rgba(32,21,36,.95)}
.chat-compose textarea{flex:1 1 220px;min-width:0;max-height:175px;resize:vertical;border:1.5px solid rgba(255,195,108,.7);border-radius:12px;background:#140f1d;color:var(--text);padding:13px 15px;font:400 16px/1.4 var(--body-font);font-style:normal}
.chat-compose textarea:focus{outline:2px solid var(--gold)}
.chat-compose textarea::placeholder{color:var(--muted);opacity:.8}
.chat-compose__send{flex:0 0 auto;min-height:49px;padding:8px 17px;border:2px solid var(--gold);border-radius:11px;background:linear-gradient(140deg,#f5ce76,#dda04b);color:#392138;font-size:17px}
.chat-compose__send:hover{filter:brightness(1.12)}
.chat-compose__send:disabled{opacity:.55;cursor:wait}
.chat-compose__send span{font-size:15px;margin-left:6px}
.chat-compose__status{width:100%;font-size:13px;color:var(--gold-light);margin:0;line-height:1.4}
.chat-compose__status--error{color:#ffb4b7}
.chat-empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:17px;padding:65px 15px}
.chat-empty__moon{font-size:66px;color:var(--gold)}
.chat-empty h2{font-family:var(--display-font);font-weight:400;font-size:32px;margin:0}
.chat-empty p{font-size:18px;color:var(--muted);margin:0 0 14px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){
 .chat-page{padding:18px 12px 15px}
 .chat-contacts{width:min(300px,calc(100% - 38px));padding:12px}
 .chat-conversation{height:clamp(430px,calc(100dvh - 133px),850px);min-height:430px}
 .chat-conversation__header{padding:10px 12px;gap:11px}
 .chat-conversation__list-button{width:40px;height:40px;flex-basis:40px}
 .chat-conversation__who h2{font-size:23px}
 .chat-messages{padding:18px 11px;gap:14px}.chat-message{max-width:94%;gap:9px}.chat-message__avatar{flex-basis:48px;width:48px;height:48px}
 .chat-message__bubble{padding:10px 12px;font-size:15px}.chat-compose{padding:10px;gap:8px}.chat-compose textarea{flex-basis:160px}
 .chat-compose__send{padding:8px 12px}.bot-settings__summary{padding:12px}.bot-settings__identity strong{font-size:21px}
}


/* Per-message conversation guidance: stored locally, never overwrites Kindroid persona. */
.bot-settings__message-rules{margin-top:25px;padding:21px 0 6px;border-top:1px solid rgba(255,205,126,.27);max-width:720px;gap:13px}
.bot-settings__message-rules h3{font-family:var(--display-font);font-weight:400;font-size:24px;font-style:normal;color:var(--gold-light);margin:0}
.bot-settings__message-rules label{font-size:16px;color:var(--text);font-style:normal}
.bot-settings__message-rules textarea{width:100%;min-height:112px;resize:vertical;border:1.5px solid rgba(255,195,108,.7);border-radius:10px;background:var(--panel-strong);color:var(--text);font:400 16px/1.5 var(--body-font);font-style:normal;padding:12px}
.bot-settings__message-rules textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bot-settings__message-rules .magic-button{justify-self:start}
.bot-settings__message-rules .bot-settings__hint strong{font-weight:600;color:var(--gold-light)}