/* Palace of Self v38: one real entrance and portrait-native mobile scenes. */ .hall-picture{position:absolute;inset:0;display:block} .hall-picture .hall-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill} .self-door-hint{padding:9px 14px;border:1px solid var(--palace-line);border-radius:999px;background:#fff9f0de;color:var(--palace-ink);font:12px/1.2 var(--sans);backdrop-filter:blur(10px)} @media(max-width:760px){ #hub,#room{ --mobile-stage-w:min(100vw,56.25svh); --mobile-stage-h:min(100svh,177.7778vw); --mobile-stage-x:calc((100vw - var(--mobile-stage-w)) / 2); --mobile-stage-y:calc((100svh - var(--mobile-stage-h)) / 2); height:100svh;min-height:560px;overflow:hidden } #hub .self-panorama,#room .self-panorama,#room .self-desk-scene{inset:0;overflow:hidden;touch-action:manipulation} #hub .self-world,#room .self-world{ position:absolute!important;width:var(--mobile-stage-w)!important;height:var(--mobile-stage-h)!important; left:50%!important;top:50%!important;min-width:0;aspect-ratio:9/16;transform:translate(-50%,-50%)!important } #hub .hall-picture .hall-art{object-fit:fill;object-position:center} body:has(#hub.active) #elarisNavigation, body:has(#room.active) #elarisNavigation{left:8px;right:8px;top:max(7px,env(safe-area-inset-top));gap:4px;align-items:stretch} body:has(#hub.active) #elarisNavigation button, body:has(#room.active) #elarisNavigation button{min-height:40px!important;padding:7px 8px!important;border-radius:12px!important;font-size:11px!important;line-height:1.15;white-space:normal} body:has(#hub.active) #elarisNavigation #journeyHome, body:has(#room.active) #elarisNavigation #journeyHome{flex:0 0 78px;font-size:14px!important;letter-spacing:.08em} body:has(#hub.active) #elarisNavigation #journeyBack, body:has(#room.active) #elarisNavigation #journeyBack{flex:1 1 auto;min-width:0;max-width:none!important;overflow:visible;text-overflow:clip} body:has(#hub.active) #elarisNavigation #journeyPalaces, body:has(#room.active) #elarisNavigation #journeyPalaces{flex:0 0 62px;margin-left:0} body:has(#hub.active) #elarisNavigation #journeyMember, body:has(#room.active) #elarisNavigation #journeyMember{flex:0 0 60px;padding-inline:6px!important} body:has(#hub.active) .ux-chronicle-link, body:has(#room.active) .ux-chronicle-link{right:8px;top:58px;min-height:34px;padding:6px 11px;font-size:11px;border-radius:17px} #hub .self-door{min-width:52px;min-height:52px;touch-action:manipulation} #hub .door-opening{border-radius:46% 46% 5% 5% / 15% 15% 3% 3%;background:transparent;box-shadow:none} #hub .door-caption{top:72%;max-width:150px;padding:7px 12px;border-radius:12px;background:#fff9f3ed;border:1px solid #fff0d2;box-shadow:0 4px 18px #54343d2b;text-shadow:none;backdrop-filter:blur(10px)} #hub .door-caption b{font-size:19px!important;color:#5d3e4d} #hub .door-caption small{font-size:10px!important;margin-top:2px;color:#765a67} #hub .door-leaf{background-size:var(--mobile-stage-w) var(--mobile-stage-h)!important} #hub .self-hall-title{left:calc(var(--mobile-stage-x) + 14px)!important;top:calc(var(--mobile-stage-y) + 100px)!important;max-width:calc(var(--mobile-stage-w) - 28px);padding:10px 13px!important;border-radius:15px!important;text-align:left} #hub .self-hall-title p{font-size:9px!important;margin:0 0 3px!important;letter-spacing:.13em} #hub .self-hall-title h1{font-size:23px!important;line-height:1.05!important} #hub .self-hall-title .palace-purpose{display:block;margin-top:4px;font-size:10px!important;line-height:1.25;max-width:32ch} #hub .self-hall-footer{left:calc(var(--mobile-stage-x) + 8px);right:calc(var(--mobile-stage-x) + 8px);bottom:calc(var(--mobile-stage-y) + 68px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:stretch} #hub .self-hall-footer .self-glass{order:0;min-width:0;min-height:38px;padding:7px 8px!important;font-size:10px!important;line-height:1.2;white-space:normal} #hub .self-door-hint{display:none} #hub .self-resume{right:8px;bottom:116px;font-size:10px;padding:8px 10px} #hub .self-status{bottom:116px;font-size:10px;padding:8px 11px} #room .room-bg{background-image:url("assets/images/self-room-mobile-v38.webp")!important;background-position:center!important;background-size:100% 100%!important} #room .room-tone{background:linear-gradient(180deg,#3a263112 0 58%,#3a263145)!important} #room #selfDeskSpot{left:50%!important;top:64%!important;width:72%!important;height:20%!important;min-height:88px} #room #selfDeskSpot>span:last-child{top:62%;width:min(245px,78vw);max-width:none;padding:8px 11px!important;font-size:14px!important;line-height:1.15;white-space:normal} #room #selfDeskSpot small{font-size:10px!important;line-height:1.2} #room .self-room-caption{left:calc(var(--mobile-stage-x) + 14px);bottom:calc(var(--mobile-stage-y) + 72px);max-width:calc(var(--mobile-stage-w) - 28px);padding:9px 12px!important} #room .self-room-caption p{font-size:9px!important;margin-bottom:3px} #room .self-room-caption h1{font-size:24px!important} #room .self-room-caption>span{font-size:10px!important;line-height:1.25} #room .self-return-hall,#room .self-leave-desk{top:58px;min-height:34px;padding:6px 9px;font-size:10px} #room .self-desk-scene{background:none} #room #selfDeskWorld{background:url("assets/images/self-desk-mobile-v38.webp") center/cover no-repeat} #room .self-desk-scene #selfDeskArt{display:none} #room .self-desk-objects{position:absolute;inset:0} #room .desk-journal{left:8%!important;top:42%!important;width:38%!important;height:26%!important} #room .desk-letter{left:55%!important;top:68%!important;width:39%!important;height:20%!important} #room .desk-archive{left:4%!important;top:70%!important;width:36%!important;height:22%!important} #room .desk-hit span{max-width:42vw;padding:7px 9px!important;font-size:12px!important;line-height:1.15;white-space:normal} #room .desk-hit small{font-size:9px!important} body:has(#hub.active) #esMySpace, body:has(#room.active) #esMySpace{left:8px;bottom:calc(8px + env(safe-area-inset-bottom));max-width:55vw} body:has(#hub.active) #esMySpace #esDiscover, body:has(#room.active) #esMySpace #esDiscover, body:has(#hub.active) #esMySpace #esSaveSpace, body:has(#room.active) #esMySpace #esSaveSpace{min-height:40px;padding:8px 11px;font-size:11px;line-height:1.1;white-space:nowrap} body:has(#hub.active) #esMySpace #esDiscover small, body:has(#room.active) #esMySpace #esDiscover small{font-size:10px} } @media(max-width:360px){ #hub .self-hall-title .palace-purpose{display:none} #hub .self-hall-footer{grid-template-columns:1fr 1fr} #hub .self-door-hint{display:none} } /* Writing becomes the journal page itself on mobile. */ @media(max-width:760px){ #room.self-palace[data-self-stage="writing"] .self-desk-scene{ background:none!important } #room.self-palace[data-self-stage="writing"] #selfDeskWorld{ background-image:linear-gradient(#fff8ed0a,#fff8ed0a),url("assets/images/self-journal-page-mobile-v40.webp")!important; background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important } #room.self-palace[data-self-stage="writing"] .self-desk-scene::after{ background:linear-gradient(90deg,#66362d1f,transparent 12%,transparent 88%,#66362d1c),linear-gradient(180deg,#48262314,transparent 16%,transparent 86%,#4826231a)!important; opacity:.42!important } #room.self-palace[data-self-stage="writing"] .self-writing-layout{ position:fixed!important;inset:0!important;z-index:5!important;display:block!important;pointer-events:none!important } #room.self-palace[data-self-stage="writing"] .self-writing-page{ position:fixed!important;inset:auto!important;left:calc(var(--mobile-stage-x) + 28px)!important;top:calc(var(--mobile-stage-y) + 58px)!important; width:calc(var(--mobile-stage-w) - 52px)!important;height:calc(var(--mobile-stage-h) - 112px)!important;max-width:none!important;min-height:0!important; padding:18px 15px 34px 18px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;pointer-events:auto!important; color:#684f4a!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important; scrollbar-width:thin;scrollbar-color:#7e524848 transparent } #room.self-palace[data-self-stage="writing"] .self-writing-page::-webkit-scrollbar{width:3px} #room.self-palace[data-self-stage="writing"] .self-writing-page::-webkit-scrollbar-thumb{background:#7e524848;border-radius:999px} #room.self-palace[data-self-stage="writing"] .self-writing-page .roomnav{ min-height:28px!important;margin:0 0 10px!important;padding:0 2px 8px!important;gap:8px!important;border-bottom:1px solid #9a655247!important } #room.self-palace[data-self-stage="writing"] .self-writing-page .roomnav a, #room.self-palace[data-self-stage="writing"] .self-writing-page .roomnav button{ width:auto!important;min-width:0!important;min-height:28px!important;padding:2px 5px!important;font-size:12px!important;line-height:1.15!important; color:#72534d!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important; text-decoration:underline;text-decoration-color:#7b4f4659;text-underline-offset:3px } #room.self-palace[data-self-stage="writing"] .privacy-note{ margin:0 0 13px!important;padding:0 2px 8px!important;border:0!important;border-bottom:1px solid #9a655238!important;background:transparent!important;box-shadow:none!important } #room.self-palace[data-self-stage="writing"] .privacy-note summary{padding:0!important;font-size:11px!important;line-height:1.35!important;letter-spacing:.02em;color:#684f4ad1!important} #room.self-palace[data-self-stage="writing"] .privacy-note p{margin:7px 0 0!important;padding:0!important;font-size:11px!important;line-height:1.45!important} #room.self-palace[data-self-stage="writing"] .stationery-masthead{ display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important;margin:0 0 10px!important;padding:0 1px 7px!important; border-bottom:1px solid #ae694c75!important } #room.self-palace[data-self-stage="writing"] .stationery-masthead>span{font-size:9px!important;line-height:1.2!important;letter-spacing:.13em!important;white-space:nowrap} #room.self-palace[data-self-stage="writing"] .stationery-masthead>b{font:italic 18px/1 Georgia,"Times New Roman",serif!important;color:#765048!important;white-space:nowrap} #room.self-palace[data-self-stage="writing"] .stationery-masthead>time{display:none!important} #room.self-palace[data-self-stage="writing"] #freeWrite, #room.self-palace[data-self-stage="writing"] #guidedJourney, #room.self-palace[data-self-stage="writing"] #modeChoice{ padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important } #room.self-palace[data-self-stage="writing"] #freeTitle, #room.self-palace[data-self-stage="writing"] #freeBody, #room.self-palace[data-self-stage="writing"] .guided-textarea, #room.self-palace[data-self-stage="writing"] input, #room.self-palace[data-self-stage="writing"] textarea{ width:100%!important;color:#624b47!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important } #room.self-palace[data-self-stage="writing"] #freeTitle{ min-height:42px!important;margin:0 0 4px!important;padding:3px 1px 7px!important;font-family:Georgia,"Times New Roman",serif!important; font-size:clamp(25px,7vw,31px)!important;font-style:italic;line-height:1.12!important;border-bottom:1px solid #9763542e!important } #room.self-palace[data-self-stage="writing"] #freeBody, #room.self-palace[data-self-stage="writing"] .guided-textarea{ min-height:clamp(250px,42dvh,370px)!important;padding:11px 2px!important;resize:none!important;font-family:Georgia,"Times New Roman",serif!important; font-size:clamp(16px,4.5vw,19px)!important;line-height:1.72!important; background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.72em - 1px),#895b4e21 calc(1.72em - 1px),#895b4e21 1.72em)!important } #room.self-palace[data-self-stage="writing"] input:focus, #room.self-palace[data-self-stage="writing"] input:focus-visible, #room.self-palace[data-self-stage="writing"] textarea:focus, #room.self-palace[data-self-stage="writing"] textarea:focus-visible{outline:0!important;box-shadow:none!important} #room.self-palace[data-self-stage="writing"] .freewrite .actions{ display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;margin:10px 0 4px!important;padding:9px 0 0!important; border-top:1px solid #9a65523d } #room.self-palace[data-self-stage="writing"] .freewrite .actions>button:first-child{display:none!important} #room.self-palace[data-self-stage="writing"] .freewrite .actions .focus-btn{ min-width:0!important;min-height:34px!important;padding:4px 2px!important;font-size:12px!important;line-height:1.2!important;color:#755850!important; background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;text-align:left;text-decoration:underline;text-decoration-color:#7b4f4657;text-underline-offset:4px } #room.self-palace[data-self-stage="writing"] .freewrite .actions .primary{ width:auto!important;max-width:142px!important;min-height:42px!important;padding:8px 13px!important;font-size:12px!important;line-height:1.16!important;white-space:normal!important; color:#fff9f2!important;background:linear-gradient(145deg,#9e5c7e,#75435f)!important;border:1px solid #fff6e8a6!important;border-radius:5px 15px 5px 15px!important; box-shadow:0 4px 11px #5b314133!important } #room.self-palace[data-self-stage="writing"] #journey>.actions, #room.self-palace[data-self-stage="writing"] #review>.actions, #room.self-palace[data-self-stage="writing"] #complete>.actions{ gap:7px!important;margin-top:9px!important;padding-top:9px!important } #room.self-palace[data-self-stage="writing"] #journey>.actions button, #room.self-palace[data-self-stage="writing"] #review>.actions button, #room.self-palace[data-self-stage="writing"] #complete>.actions button{ min-height:38px!important;padding:7px 12px!important;font-size:12px!important;line-height:1.2!important;white-space:normal!important } #room.self-palace[data-self-stage="writing"] .autosave{margin:5px 0 0!important;font-size:10px!important;line-height:1.35!important;color:#684f4aad!important;text-align:right} #room.self-palace[data-self-stage="writing"] .self-markers{margin:10px 0 0!important;padding:9px 0 0!important;border-top:1px solid #9a655238!important} #room.self-palace[data-self-stage="writing"] .self-markers summary{font-size:11px!important;line-height:1.35!important} body:has(#room.self-palace.active[data-self-stage="writing"]) .ux-chronicle-link{display:none!important} }