/* The 3-D lounge home, its dialogs, and the room backdrop behind student pages. */
.l3d-page{background:#140d09;color:#f2e6cf;min-height:calc(100vh - 46px)}
.l3d-stage{position:relative;height:calc(100svh - var(--bar-h,58px));min-height:440px;max-height:1100px;background:#1d120b;overflow:hidden}
.l3d-stage>.room3d{display:block;width:100%;height:100%;overflow:visible}
.room3d .hs{cursor:pointer;outline:none}
.room3d .hs .glowable{transition:filter .22s ease}
.room3d .hs:hover .glowable,.room3d .hs:focus-visible .glowable{filter:drop-shadow(0 0 5px rgba(255,214,120,.85)) drop-shadow(0 0 16px rgba(255,186,80,.4)) brightness(1.07)}
.room3d .l3-book{cursor:pointer}
.room3d .l3-book:hover rect{filter:brightness(1.25)}
.room3d .plaque{opacity:0;transition:opacity .2s ease;pointer-events:none}
.room3d .plaque rect{fill:rgba(20,12,6,.88);stroke:#e9c46a;stroke-width:1.6}
.room3d .plaque text{fill:#fbefd5;font:700 21px ui-sans-serif,system-ui,sans-serif}
.room3d .plaque text.sub{font-size:15px;font-weight:500;fill:#e6d4b0}
.room3d .plaque.show,.l3d-labels .room3d .plaque,.l3d-hint .room3d .plaque{opacity:1}
.room3d .plaque.cta{opacity:1}
.room3d .plaque.cta rect{fill:#e3b955;stroke:#fff3c4;stroke-width:1.4}
.room3d .plaque.cta text{fill:#2b1808}.room3d .plaque.cta text.sub{fill:#3b2410;font-weight:700}
.room3d .plaque.adv rect{stroke:#b9a6ff}
.room3d .hand,.room3d .chalk text{font-family:"Chalkboard SE","Chalkduster","Comic Sans MS","Segoe Print","Bradley Hand",cursive}
.room3d .chalk text{fill:#eef3ea;opacity:.92}.room3d .chalk path,.room3d .chalk rect{stroke:#eef3ea;opacity:.85}

/* ambient motion */
.room3d .tw{animation:l3tw 2.6s ease-in-out infinite}
@keyframes l3tw{0%,100%{opacity:.25}50%{opacity:1}}
.room3d .fl{transform-box:fill-box;transform-origin:50% 100%;animation:l3flk 1.3s ease-in-out infinite alternate}
.room3d .fl.f2{animation-duration:1.05s;animation-delay:-.4s}.room3d .fl.f3{animation-duration:.9s;animation-delay:-.2s}.room3d .fl.f4{animation-duration:.75s;animation-delay:-.5s}.room3d .fl.f5{animation-duration:.6s}
@keyframes l3flk{0%{transform:scale(1,1) skewX(0)}45%{transform:scale(.9,1.1) skewX(3deg)}100%{transform:scale(1.05,.92) skewX(-3deg)}}
.room3d .ember{animation:l3emb 1.8s ease-in-out infinite alternate}@keyframes l3emb{from{opacity:.7}to{opacity:1}}
.room3d .fglow{animation:l3glow 3.4s ease-in-out infinite}
@keyframes l3glow{0%,100%{opacity:1}22%{opacity:.82}48%{opacity:.95}70%{opacity:.86}}
.room3d .sglow{animation:l3glow 4.6s ease-in-out infinite}
.room3d .spark{animation:l3spark 1.7s ease-out infinite;opacity:0}
@keyframes l3spark{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(8px,-64px);opacity:0}}
.room3d .l3-flame{transform-box:fill-box;transform-origin:50% 100%;animation:l3cfl .9s ease-in-out infinite alternate}
@keyframes l3cfl{from{transform:scale(1,1)}to{transform:scale(.85,1.15)}}
.room3d .dust{animation:l3dust 9s ease-in-out infinite}
@keyframes l3dust{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(14px,-22px);opacity:.9}}
.room3d .mote{animation:l3mote 3.8s ease-out infinite;opacity:0}
@keyframes l3mote{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(6px,-70px);opacity:0}}
.room3d .bk-halo{animation:l3halo 3.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
@keyframes l3halo{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}
.room3d .pg-flip{transform-box:fill-box;transform-origin:0% 100%;animation:l3pg 7s ease-in-out infinite}
@keyframes l3pg{0%,70%{transform:scaleX(1)}82%{transform:scaleX(-1)}100%{transform:scaleX(-1);opacity:0}}
.room3d .rip{animation:l3rip 3s ease-in-out infinite alternate}@keyframes l3rip{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
.room3d .steam{animation:l3steam 3s ease-out infinite}@keyframes l3steam{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
.room3d .tease-sheen rect{animation:l3sheen 5.5s ease-in-out infinite}@keyframes l3sheen{0%,55%{transform:translateX(0)}90%,100%{transform:translateX(420px)}}
.room3d .frame-locked{filter:saturate(.75) brightness(.72)}
.room3d .bulb{animation:l3bulb 2.4s ease-in-out infinite alternate}@keyframes l3bulb{from{opacity:.55}to{opacity:1}}
.room3d .float{animation:l3float 5s ease-in-out infinite alternate}@keyframes l3float{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.room3d .sway{animation:l3sway 6s ease-in-out infinite alternate}@keyframes l3sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.room3d .neon{animation:l3neon 4s ease-in-out infinite}@keyframes l3neon{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.6}52%{opacity:1}}
.room3d .neonline{animation:l3neon 3s ease-in-out infinite}
.room3d .firefly{animation:l3ff 6s ease-in-out infinite;opacity:0}@keyframes l3ff{0%,100%{transform:translate(0,0);opacity:0}30%{opacity:1}60%{transform:translate(18px,-12px);opacity:.3}80%{opacity:1}}
.room3d .bubble{animation:l3bub 7s linear infinite}@keyframes l3bub{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-120px);opacity:0}}
.room3d .aur{animation:l3aur 12s ease-in-out infinite alternate}@keyframes l3aur{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
.room3d .rain{animation:l3rain .7s linear infinite}@keyframes l3rain{from{transform:translate(0,-18px)}to{transform:translate(-6px,18px)}}
.room3d .snow{animation:l3snow 9s linear infinite}@keyframes l3snow{from{transform:translateY(-30px)}to{transform:translateY(30px)}}
.room3d .ray{animation:l3ray 6s ease-in-out infinite alternate}@keyframes l3ray{from{opacity:.4}to{opacity:1}}
.room3d .fish{animation:l3fish 12s linear infinite}@keyframes l3fish{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.room3d .lightning{opacity:0;animation:l3light 9s linear infinite}@keyframes l3light{0%,88%,92%,100%{opacity:0}89%{opacity:.5}91%{opacity:.3}}
.room3d .cloud{animation:l3cloud 18s ease-in-out infinite alternate}@keyframes l3cloud{from{transform:translateX(-20px)}to{transform:translateX(20px)}}
.room3d .l3-cr{transform-box:fill-box;transform-origin:50% 100%;animation:l3breathe 4.2s ease-in-out infinite}
@keyframes l3breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.018)}}
.room3d .l3-cr.do-hop{animation:l3hop 1.1s ease-out 1}
@keyframes l3hop{0%{transform:translateY(0)}25%{transform:translateY(-18px) scale(.98,1.03)}45%{transform:translateY(0) scale(1.04,.96)}60%{transform:translateY(-6px)}75%,100%{transform:translateY(0)}}
.room3d .l3-cr.do-look{animation:l3look 1.5s ease-in-out 1}@keyframes l3look{0%,100%{transform:rotate(0)}30%{transform:rotate(-3.5deg)}70%{transform:rotate(3deg)}}
.room3d .zz{fill:#eef1ff;font-family:Georgia,serif;font-weight:700;stroke:#1b1230;stroke-width:1.5px;paint-order:stroke;opacity:0;animation:l3zz 2.6s ease-out forwards}
@keyframes l3zz{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(16px,-40px)}}
.room3d .spk{opacity:0;animation:l3spk 1.4s ease-out forwards}@keyframes l3spk{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
.room3d .mb-flip{transform-box:fill-box;transform-origin:0% 100%;animation:l3mb 1.2s ease-in-out .5s 2}@keyframes l3mb{0%{transform:scaleX(1)}50%,100%{transform:scaleX(-1)}}
.room3d .nb-new{animation:l3fly 1.3s cubic-bezier(.3,.7,.3,1) 1}
@keyframes l3fly{0%{transform:translate(var(--fx),var(--fy)) scale(.5);opacity:0}15%{opacity:1}100%{transform:translate(0,0) scale(1)}}
.l3d-lite .room3d *:not(.l3-cr):not(.fl):not(.bk-halo){animation:none!important}
.l3d-lite .room3d .hs .glowable{transition:none}
@media (prefers-reduced-motion:reduce){.room3d *,.room3d *::before{animation:none!important;transition:none!important}}

/* teacher note pinned in the room */
.l3d-note{position:absolute;left:clamp(10px,3vw,40px);top:clamp(10px,3vh,30px);max-width:min(330px,44vw);background:linear-gradient(#f6ead0,#ecdcb8);color:#3b2a18;border-radius:3px;padding:14px 18px 12px;box-shadow:0 10px 28px rgba(0,0,0,.45);transform:rotate(-1.4deg);z-index:3;text-decoration:none;display:block;border:0;text-align:left;cursor:pointer;font:inherit}
.l3d-note::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a7a,#a8242a);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.l3d-note small{display:block;letter-spacing:2px;font-weight:800;font-size:11px;color:#7a5a32}
.l3d-note b{display:block;font-family:Georgia,serif;font-size:clamp(17px,1.6vw,22px);margin:4px 0 2px}
.l3d-note span{font-size:13px;color:#5a4128;text-decoration:underline}
.l3d-note.done{background:linear-gradient(#e9efd9,#d8e3c0)}
.l3d-note:focus-visible{outline:3px solid #e9c46a;outline-offset:3px}

.l3d-profile-link{position:absolute;left:14px;bottom:12px;z-index:3;background:rgba(13,8,5,.72);border:1px solid #4a3019;border-radius:999px;padding:7px 16px;font-size:13px;color:#d8c7a6;cursor:pointer;backdrop-filter:blur(4px)}
.l3d-profile-link:hover{color:#f7ecd6;border-color:#e9c46a}
.l3d-motion{position:absolute;right:14px;bottom:12px;z-index:3;background:rgba(13,8,5,.72);border:1px solid #4a3019;border-radius:999px;padding:7px 14px;font-size:12.5px;color:#d8c7a6;cursor:pointer}
.l3d-motion[aria-pressed="true"]{border-color:#e9c46a;color:#f7ecd6}
.l3d-dock{display:none}

/* profile strip below the room */
.l3d-below{max-width:1240px;margin:0 auto;padding:24px 20px 64px}
.l3d-profile{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center}
.l3d-profile .calling-card{margin:0}
.l3d-side{display:flex;flex-direction:column;gap:12px}
.l3d-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.l3d-stats div{background:#1d130c;border:1px solid #3b2717;border-radius:10px;padding:10px 6px;text-align:center}
.l3d-stats b{display:block;font-size:20px;color:#f7ecd6}.l3d-stats b small{font-size:12px;color:#c9b89a}.l3d-stats span{font-size:12px;color:#c9b89a}
.l3d-links{display:flex;flex-wrap:wrap;gap:8px}
.l3d-goal{font-size:13px;color:#c9b89a;margin:0}
.l3d-goal b{color:#f2e6cf}
.l3d-below .reading-shelf{margin-top:30px}

/* dialogs */
.l3d-dialog h2{font-family:Georgia,serif;margin:0 0 6px}
.l3d-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.l3d-stat-grid div{background:#120b07;border:1px solid #3b2717;border-radius:12px;padding:12px 8px;text-align:center}
.l3d-stat-grid b{display:block;font-size:21px;color:#f3d27a}.l3d-stat-grid span{font-size:12.5px;color:#c9b89a}
.l3d-cups{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 14px}
.l3d-cups div{text-align:center;background:#120b07;border:1px solid #3b2717;border-radius:12px;padding:10px}
.l3d-cups svg{height:84px;width:100%}.l3d-cups small{display:block;color:#c9b89a;font-size:12.5px}
.l3d-medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.l3d-medal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;background:#120b07;border:1px solid #3b2717;border-radius:12px;padding:12px 8px;opacity:.5;filter:grayscale(1)}
.l3d-medal.got{opacity:1;filter:none;border-color:#6b4a2a}
.l3d-medal svg{width:44px;height:44px}.l3d-medal b{font-size:13.5px}.l3d-medal small{font-size:12px;color:#c9b89a}
.orthos-dialog.l3d-wide{width:min(1000px,94vw)}
.l3d-dialog .daily-book,.l3d-dialog .weekly-panel{margin:0 0 14px}

/* Night Conductor unlock moment */
.nc-reveal{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#03040c;overflow:hidden;color:#f7ecd6}
.nc-reveal .rv-sky{position:absolute;inset:0;background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#ffe9b0,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1px 1px at 10% 80%,#fff,transparent),radial-gradient(120% 70% at 50% 100%,#2a1f5c,transparent 60%);opacity:0;transition:opacity 1s}
.nc-reveal.go .rv-sky,.nc-reveal.final .rv-sky{opacity:1}
.nc-reveal .rv-rays{position:absolute;left:50%;top:42%;width:1600px;height:1600px;margin:-800px 0 0 -800px;background:repeating-conic-gradient(from 0deg,rgba(255,226,154,.16) 0 6deg,transparent 6deg 18deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);opacity:0;transform:scale(.4)}
.nc-reveal.go .rv-rays{animation:ncRays 1.2s ease-out 2.2s forwards,ncSpin 40s linear 2.2s infinite}.nc-reveal.final .rv-rays{opacity:1;transform:none}
@keyframes ncRays{to{opacity:1;transform:scale(1)}}@keyframes ncSpin{to{rotate:360deg}}
.nc-reveal .rv-stage{position:relative;width:min(880px,92vw);aspect-ratio:4/1;perspective:1200px}
.nc-reveal .rv-ticket,.nc-reveal .rv-card{position:absolute;inset:0;backface-visibility:hidden}
.nc-reveal .rv-ticket{display:flex;align-items:center;justify-content:center}
.nc-reveal .tk-face{width:62%;height:100%;background:linear-gradient(135deg,#f7e7b9,#e6c97f);border-radius:12px;color:#3b2410;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);border:3px dashed #8a6222}
.nc-reveal .tk-face small{letter-spacing:4px;font-weight:800;font-size:12px}.nc-reveal .tk-face b{font-family:Georgia,serif;font-size:clamp(22px,3.4vw,38px);letter-spacing:4px}.nc-reveal .tk-face em{font-style:normal;font-size:13px;letter-spacing:2px;opacity:.8}
.nc-reveal .tk-stamps{display:flex;gap:12px}.nc-reveal .tk-stamps span{width:34px;height:34px;border-radius:50%;border:2px solid #8a6222;display:flex;align-items:center;justify-content:center;font-weight:800;color:#8a6222}
.nc-reveal.go .rv-ticket{animation:ncTkIn .7s cubic-bezier(.2,.8,.2,1) both,ncTkOut .5s ease-in 2s forwards}
.nc-reveal.go .tk-stamps span{animation:ncStamp .35s ease-out both;animation-delay:calc(.8s + var(--i) * .22s)}
@keyframes ncTkIn{from{transform:translateY(60px) rotateX(30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes ncStamp{0%{transform:scale(2.2);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:scale(1);background:#b8323a;color:#fff;border-color:#b8323a}}
@keyframes ncTkOut{to{transform:rotateY(90deg)}}
.nc-reveal .rv-card{transform:rotateY(-90deg);opacity:0}.nc-reveal.go .rv-card{animation:ncCard .7s cubic-bezier(.2,.9,.25,1.15) 2.45s forwards}
.nc-reveal.final .rv-card{transform:none;opacity:1}.nc-reveal.final .rv-ticket{display:none}
@keyframes ncCard{0%{transform:rotateY(-90deg);opacity:1}100%{transform:none;opacity:1}}
.nc-reveal .rv-card svg{width:100%;height:100%;display:block;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 40px rgba(123,108,255,.25)}
.nc-reveal .rv-burst{position:absolute;left:50%;top:42%;width:0;height:0}
.nc-reveal .rv-burst i{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(#fff6d0,#f3c652);opacity:0;box-shadow:0 0 8px #ffd66b}
.nc-reveal.go .rv-burst i{animation:ncBurst var(--t) cubic-bezier(.1,.7,.3,1) 2.5s forwards}
@keyframes ncBurst{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.3)}}
.nc-reveal .rv-text{position:relative;text-align:center;margin-top:34px;opacity:0;transform:translateY(12px);padding:0 16px}
.nc-reveal.go .rv-text{animation:ncTxt .6s ease-out 3.1s forwards}.nc-reveal.final .rv-text{opacity:1;transform:none}
@keyframes ncTxt{to{opacity:1;transform:none}}
.nc-reveal .rv-text small{letter-spacing:4px;color:#cfc3ff;font-weight:700;font-size:12.5px}
.nc-reveal .rv-text h2{font-family:Georgia,serif;font-size:clamp(34px,5vw,58px);margin:6px 0;background:linear-gradient(#fff3c4,#e9b949);-webkit-background-clip:text;background-clip:text;color:transparent}
.nc-reveal .rv-text p{color:#e6dcc4;margin:0 0 18px}
.nc-reveal .rv-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* the room, softly, behind other student pages */
body.l3d-backdrop .lounge-page:not(.l3d-page){background:linear-gradient(rgba(16,10,6,.86),rgba(16,10,6,.93)),var(--l3d-bg) center/cover fixed,#140d09}

/* the customizer's room preview */
.scene.scene3d{background:#1d120b;aspect-ratio:16/9}
.scene.scene3d svg{width:100%;height:100%}

@media (max-width:820px){
  .l3d-stage{height:auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .l3d-stage>.room3d{width:calc(64svh * 16 / 9);height:64svh;max-width:none}
  .l3d-note{position:sticky;left:10px;max-width:70vw;top:10px;margin-bottom:-90px}
  .l3d-profile-link,.l3d-motion{display:none}
  .l3d-dock{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;background:#0d0805;border-top:1px solid #2a1b10;position:sticky;bottom:0;z-index:6}
  .l3d-dock a,.l3d-dock button{flex:0 0 auto;border:1px solid #4a3019;background:#24170d;color:#f2e6cf;border-radius:999px;padding:9px 14px;font-size:14px;text-decoration:none;white-space:nowrap;font:inherit;cursor:pointer}
  .l3d-dock .cta{background:#e3b955;color:#2b1808;border-color:#e3b955;font-weight:800}
  .l3d-profile{grid-template-columns:1fr}
  .l3d-stats,.l3d-stat-grid,.l3d-cups{grid-template-columns:repeat(2,1fr)}
}