/* A dark overlay keeps every setting readable over the artwork. */
.social-panel{position:relative;isolation:isolate;overflow-x:hidden;overflow-y:auto;background:linear-gradient(90deg,rgba(9,15,31,.96) 0%,rgba(11,18,37,.91) 57%,rgba(10,15,29,.55) 100%),url('/assets/settings-anime-adult.png') right center/cover no-repeat}
.social-panel>*{position:relative;z-index:1}
.social-panel:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,13,29,.78),transparent 72%)}
@media(max-width:700px){.social-panel{background:linear-gradient(180deg,rgba(8,13,29,.94),rgba(8,13,29,.87)),url('/assets/settings-anime-adult.png') 68% top/auto 100% no-repeat}}

/* Page two gets its own calm ramen-shop scene.  It is CSS motion instead of
   video so Settings stays quick and works well on phones too. */
#settings-page-two{position:relative;isolation:isolate;overflow:hidden}
#settings-page-two>:not(.ramen-settings-art){position:relative;z-index:1}
.ramen-settings-art{position:absolute;z-index:0;inset:0 -18px 0 30%;pointer-events:none;overflow:hidden;opacity:.73;background:linear-gradient(90deg,rgba(9,15,31,.99) 0%,rgba(9,15,31,.91) 21%,rgba(9,15,31,.32) 68%,rgba(9,15,31,.12) 100%),url('/assets/settings-ramen-adult.png') right center/cover no-repeat;transform:scale(1.015)}
.ramen-settings-art:before,.ramen-settings-art:after{content:"";position:absolute;right:23%;bottom:19%;width:78px;height:108px;border:7px solid transparent;border-top-color:rgba(255,248,229,.67);border-radius:50%;filter:blur(2px);opacity:0;animation:ramenSteam 4.3s ease-in-out infinite}
.ramen-settings-art:after{right:34%;bottom:15%;width:56px;height:91px;animation-delay:-2.15s}
.ramen-chopsticks{position:absolute;right:23%;bottom:34%;width:91px;height:5px;border-radius:99px;background:linear-gradient(90deg,#583218,#f9d59a,#8a4b26);box-shadow:0 8px 0 rgba(92,47,25,.92);transform:rotate(-29deg);transform-origin:right center;animation:ramenChopsticks 3.8s ease-in-out infinite}
.ramen-noodles{position:absolute;right:27%;bottom:25%;width:44px;height:69px;border-right:3px solid rgba(255,225,163,.92);border-bottom:3px solid rgba(255,225,163,.92);border-radius:0 0 60% 20%;transform:rotate(-24deg);filter:drop-shadow(0 0 4px rgba(255,218,126,.5));animation:ramenNoodles 3.8s ease-in-out infinite}
@keyframes ramenSteam{0%,100%{opacity:0;transform:translate3d(-8px,13px,0) scale(.68)}32%{opacity:.7}72%{opacity:.06;transform:translate3d(17px,-67px,0) scale(1.12)}}
@keyframes ramenChopsticks{0%,100%{transform:rotate(-29deg) translateY(0)}46%{transform:rotate(-21deg) translateY(-21px)}68%{transform:rotate(-25deg) translateY(-12px)}}
@keyframes ramenNoodles{0%,100%{transform:rotate(-24deg) translateY(0);opacity:.72}46%{transform:rotate(-17deg) translateY(-24px);opacity:1}68%{transform:rotate(-22deg) translateY(-13px)}}
@media(max-width:700px){.ramen-settings-art{inset:0 -80px 0 0;opacity:.35;background:linear-gradient(180deg,rgba(9,15,31,.93),rgba(9,15,31,.71)),url('/assets/settings-ramen-adult.png') 74% center/cover no-repeat}.ramen-chopsticks,.ramen-noodles,.ramen-settings-art:before,.ramen-settings-art:after{opacity:.45}}

/* Selectable full-page Ramen Night premium world. */
.ramen-night-scene{background:#100c16}.ramen-night-art{inset:-3%;background:linear-gradient(90deg,rgba(8,10,24,.6),rgba(8,10,24,.1)),url('/assets/settings-ramen-adult.png') center/cover no-repeat;filter:brightness(.55) saturate(.92);animation:ramenNightDrift 18s ease-in-out infinite alternate}.ramen-night-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 22%,rgba(255,177,82,.2),transparent 18%),linear-gradient(180deg,rgba(6,8,22,.08),rgba(6,8,22,.62))}.ramen-night-steam{right:25%;bottom:20%;width:90px;height:130px;border:8px solid transparent;border-top-color:rgba(255,238,203,.58);border-radius:50%;filter:blur(2px);animation:ramenNightSteam 4.2s ease-in-out infinite}.ramen-night-steam.two{right:38%;bottom:15%;width:64px;height:104px;animation-delay:-2.1s}body[data-theme="ramen-night"]{--blue:#ffc477;--mint:#ffe0ae;--orange:#ff9b58;background:#100c16}body[data-theme="ramen-night"] .panel{background:linear-gradient(145deg,rgba(38,22,29,.88),rgba(14,12,28,.93))}.ramen-night{background:linear-gradient(135deg,#241018,#aa5a25,#ffcf73);color:#28140f}@keyframes ramenNightDrift{from{transform:scale(1.03) translate3d(-.7%,0,0)}to{transform:scale(1.1) translate3d(.7%,-.5%,0)}}@keyframes ramenNightSteam{0%,100%{opacity:0;transform:translate3d(-10px,18px,0) scale(.68)}30%{opacity:.65}72%{opacity:.05;transform:translate3d(19px,-74px,0) scale(1.15)}}

/* First-visit update note. */
.lastbetter-update-modal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:22px;background:rgba(2,7,18,.72);backdrop-filter:blur(8px);animation:updateFadeIn .3s ease-out}.lastbetter-update-card{position:relative;width:min(440px,100%);padding:28px;border:1px solid rgba(116,198,255,.55);border-radius:22px;background:linear-gradient(145deg,#182a51,#0a1328 73%);box-shadow:0 25px 90px rgba(0,0,0,.55),0 0 40px rgba(96,207,255,.16);color:#edf5ff;animation:updateCardIn .48s cubic-bezier(.17,.84,.28,1.2)}.lastbetter-update-card .eyebrow{margin:0 0 8px;color:#8ce9ff;font:900 11px ui-monospace,monospace;letter-spacing:.16em}.lastbetter-update-card h2{margin:0 34px 10px 0;font-size:30px;line-height:1.02}.lastbetter-update-card p{margin:0;color:#b8cae9;line-height:1.55}.lastbetter-update-card ul{display:grid;gap:9px;margin:20px 0 0;padding:0;list-style:none}.lastbetter-update-card li{padding:11px 13px;border:1px solid rgba(132,177,238,.26);border-radius:11px;background:rgba(5,14,32,.55);font:800 13px ui-monospace,monospace}.lastbetter-update-card li b{color:#7ff4c7}.lastbetter-update-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid #6f91bd;border-radius:10px;background:#122442;color:#f1f6ff;font-size:22px;line-height:1;cursor:pointer}.lastbetter-update-close:hover{border-color:#8ce9ff;background:#1b365f;transform:scale(1.06)}.lastbetter-update-modal.closing{animation:updateFadeOut .28s ease-in forwards}.lastbetter-update-modal.closing .lastbetter-update-card{animation:updateCardOut .24s ease-in forwards}@keyframes updateFadeIn{from{opacity:0}to{opacity:1}}@keyframes updateCardIn{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes updateFadeOut{to{opacity:0}}@keyframes updateCardOut{to{opacity:0;transform:scale(.92) translateY(9px)}}