/* V33.8.48: actual authenticated welcome page, opt-in for ALL fantasy themes.
 * The 5 original app styles, calendar settings, API/auth and employee data are unchanged.
 * The selected transparent illustration sits BEHIND every real card, never in a box. */
body[data-fantasy-theme] #app .luna-magic-scene {
 --mw-glow:var(--fantasy-gold,#ffe3a1);
 --mw-stroke:rgba(var(--fantasy-rgb),.74);
 min-height:100dvh;
 position:relative;isolation:isolate;
 display:block;overflow:hidden;
 padding:calc(17px + var(--safe-t,0px)) max(13px,calc((100vw - 600px)/2)) calc(31px + var(--safe-b,0px));
 color:#fff2dc;
 background:radial-gradient(ellipse 94% 36% at 20% 17%,rgba(var(--fantasy-rgb),.21),transparent 76%),
  linear-gradient(145deg,var(--fantasy-mid,#502044),var(--fantasy-night,#1b102b) 64%,#130713);
}
body[data-fantasy-theme^="maekru-"] #app .luna-magic-scene{
 --mw-stroke:rgba(255,197,108,.89);--mw-glow:#ffe6a6;
 background:radial-gradient(ellipse 79% 34% at 17% 16%,rgba(218,55,21,.26),transparent 75%),
  radial-gradient(ellipse 96% 34% at 77% 72%,rgba(171,43,17,.13),transparent 85%),
  linear-gradient(155deg,#390912,#26060e 65%,#170409);
}
/* Abstract gilded geometry and candle specks are deliberately decorative. */
body[data-fantasy-theme] #app .luna-magic-scene::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.34;
 background-image:var(--fantasy-world),
  radial-gradient(circle at 12% 10%,rgba(255,226,152,.77) 0 1px,transparent 2px),
  radial-gradient(circle at 92% 24%,rgba(255,214,118,.60) 0 2px,transparent 3px),
  repeating-radial-gradient(circle at 20% 14%,transparent 0 73px,rgba(255,209,121,.12) 74px 75px);
 background-position:center top;background-size:cover;
}
body[data-fantasy-theme] #app .luna-magic-scene::after{
 content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.56;
 background:linear-gradient(94deg,rgba(22,2,9,.05),transparent 55%,rgba(24,3,14,.23));
}
body[data-fantasy-theme] #app .luna-magic-inner{
 display:block!important;position:relative;z-index:2;
 width:100%;max-width:540px;margin:0 auto;gap:0!important;text-align:center;
}
body[data-fantasy-theme] #app .luna-magic-hero-layout{
 position:relative;height:clamp(385px,118vw,600px);width:100%;z-index:1;
}
body[data-fantasy-theme] #app .luna-magic-art{
 position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible;
}
body[data-fantasy-theme] #app .luna-magic-figure{
 position:absolute;display:block;
 top:clamp(-40px,-8vw,-14px);left:clamp(-145px,-22vw,-44px);
 width:clamp(340px,105vw,685px);height:clamp(560px,169vw,950px);
 object-fit:contain;object-position:top left;
 opacity:.97;filter:drop-shadow(0 0 19px rgba(var(--fantasy-rgb),.48));
 transform:translate3d(0,0,0);animation:luna-magic-figure-float 7.2s ease-in-out infinite;
}
@keyframes luna-magic-figure-float{
 0%,100%{transform:translate3d(0,2px,0) rotate(-.4deg)}
 50%{transform:translate3d(4px,-8px,0) rotate(.55deg)}
}
body[data-fantasy-theme] #app .luna-magic-halo{
 position:absolute;top:20px;left:-190px;width:700px;height:700px;border-radius:50%;
 background:repeating-radial-gradient(circle,transparent 0 60px,rgba(var(--fantasy-rgb),.12) 62px 63px,transparent 65px 90px);
 opacity:.5;animation:luna-magic-halo-breathe 9s ease-in-out infinite alternate;
}
@keyframes luna-magic-halo-breathe{from{opacity:.25;transform:scale(.985)}to{opacity:.65;transform:scale(1.02)}}
body[data-fantasy-theme] #app .luna-magic-twinkle{
 position:absolute;font-size:27px;color:var(--mw-glow);text-shadow:0 0 17px var(--fantasy-glow);
 animation:luna-magic-twinkle 4.4s ease-in-out infinite alternate;
}
body[data-fantasy-theme] #app .luna-magic-twinkle.t1{top:16%;right:7%}
body[data-fantasy-theme] #app .luna-magic-twinkle.t2{top:38%;left:4%;animation-delay:-1.6s}
body[data-fantasy-theme] #app .luna-magic-twinkle.t3{top:53%;right:10%;animation-delay:-2.8s}
@keyframes luna-magic-twinkle{from{opacity:.3;transform:scale(.8)}to{opacity:.95;transform:scale(1.1)}}
/* V33.8.48: full-bleed reading scrim. The former 57%-wide rectangle
 * stopped at the narrow inner column, exposing an abrupt vertical black edge
 * on the right. Extend to the actual viewport edge, with a smooth fade on
 * the left. No card, character, text, database or app-theme changes. */
body[data-fantasy-theme] #app .luna-magic-hero-layout::after{
 content:'';
 position:absolute;
 z-index:1;
 top:0;
 bottom:0;
 left:0;
 /* Parent is centered and max-width constrained: negate its right gutter. */
 right:calc((100% - 100vw)/2);
 width:auto;
 pointer-events:none;
 border:0;
 box-shadow:none;
 border-radius:0;
 background:linear-gradient(90deg,
   rgba(23,3,13,0) 0%,
   rgba(23,3,13,.015) 20%,
   rgba(23,3,13,.09) 37%,
   rgba(26,4,14,.22) 55%,
   rgba(26,4,14,.38) 78%,
   rgba(26,4,14,.44) 100%);
}
body[data-fantasy-theme] #app .luna-magic-identity{
 width:53%;position:absolute;top:1px;right:0;z-index:2;
 display:flex;align-items:center;flex-direction:column;gap:7px;
 color:#fff4dc;text-shadow:0 2px 8px rgba(18,2,8,.88);
}
body[data-fantasy-theme] #app .luna-magic-user-heading{
 display:grid;gap:0;justify-items:center;width:100%;padding:3px 1px 0;
}
body[data-fantasy-theme] #app .luna-magic-user-heading>span{
 color:var(--mw-glow);font-size:24px;line-height:1.1;
}
body[data-fantasy-theme] #app .luna-magic-user-heading>strong{
 font-size:clamp(16px,5vw,27px);font-weight:900;line-height:1.25;
 max-width:100%;overflow-wrap:anywhere;color:var(--mw-glow);
}
body[data-fantasy-theme] #app .luna-magic-user-heading>small{
 font-size:12px;color:#ffdfb1;overflow-wrap:anywhere;
}
body[data-fantasy-theme] #app .luna-magic-identity .welcome-verified{
 position:relative;z-index:2;margin:5px 0 10px;display:block;
 font-size:clamp(10px,2.7vw,13px);color:var(--mw-glow);
 border:1px solid var(--mw-stroke);border-radius:100px;
 background:rgba(66,16,26,.66);padding:8px 11px;
 box-shadow:0 0 13px rgba(var(--fantasy-rgb),.10);white-space:nowrap;
}
body[data-fantasy-theme] #app .luna-magic-welcome-title{
 margin:2px 0 8px;max-width:100%;font-size:clamp(22px,6.1vw,38px);
 line-height:1.23;font-weight:950;letter-spacing:-.04em;
 color:var(--mw-glow);text-shadow:0 0 14px rgba(var(--fantasy-rgb),.52),0 3px 6px rgba(10,2,6,.78);
}
body[data-fantasy-theme] #app .welcome-hero.luna-magic-avatar{
 margin:0 auto 4px;flex:none;width:clamp(94px,26vw,151px);height:clamp(94px,26vw,151px);
 background:radial-gradient(circle,rgba(var(--fantasy-rgb),.20),transparent 64%);
 border:0!important;box-shadow:none!important;
}
body[data-fantasy-theme] #app .luna-magic-avatar .welcome-photo{
 border:3px solid rgba(255,241,208,.96);background:#351121;
 box-shadow:0 0 0 4px rgba(var(--fantasy-rgb),.22),0 0 24px rgba(var(--fantasy-rgb),.52);
}
body[data-fantasy-theme] #app .luna-magic-intro{
 display:grid;gap:4px;width:100%;text-align:center;
 animation:none;opacity:1!important;transform:none!important;
}
body[data-fantasy-theme] #app .luna-magic-intro h2{
 font-size:clamp(19px,5.8vw,31px);font-weight:950;
 color:#fff8e8;line-height:1.15;overflow-wrap:anywhere;
}
body[data-fantasy-theme] #app .luna-magic-intro p{color:#fff1db;font-size:clamp(11px,3vw,16px)}
body[data-fantasy-theme] #app .luna-magic-intro .caption{
 font-size:clamp(10px,2.65vw,13px);line-height:1.4;
 color:#ffe8c2!important;text-shadow:0 1px 6px rgba(0,0,0,.90);
}
body[data-fantasy-theme] #app .luna-magic-overview,
body[data-fantasy-theme] #app .luna-magic-rings > .panel.glass{
 position:relative;z-index:3;overflow:hidden;
 background:linear-gradient(112deg,rgba(75,18,27,.72),rgba(22,8,25,.81))!important;
 background-image:none!important;
 border:1.5px solid var(--mw-stroke)!important;border-radius:23px!important;
 box-shadow:0 10px 25px rgba(8,0,6,.33),inset 0 0 19px rgba(var(--fantasy-rgb),.07),0 0 11px rgba(var(--fantasy-rgb),.12)!important;
 color:#fff4e1!important;
 -webkit-backdrop-filter:blur(9px)!important;backdrop-filter:blur(9px)!important;
}
body[data-fantasy-theme] #app .luna-magic-overview{
 padding:15px 19px 16px!important;margin:0 0 14px!important;min-height:110px;
 display:grid;gap:7px;text-align:center;
}
body[data-fantasy-theme] #app .luna-magic-overview>b{
 font-size:clamp(15px,4vw,19px);color:#fff8e3;text-shadow:0 2px 7px rgba(0,0,0,.5);
}
body[data-fantasy-theme] #app .luna-magic-overview-line{
 display:flex;gap:8px;align-items:center;justify-content:center;
 font-size:clamp(12px,3.3vw,15px);line-height:1.38;color:#fff1df;
}
body[data-fantasy-theme] #app .luna-magic-overview-line>.luna-maekru-ui-icon{width:20px;height:20px}
body[data-fantasy-theme] #app .luna-magic-overview-line>span:first-child{min-width:23px;display:grid;place-items:center;color:var(--mw-glow)}
body[data-fantasy-theme] #app .luna-magic-rings > .panel.glass{padding:16px 13px 15px!important;margin:0 0 14px!important;}
body[data-fantasy-theme] #app .luna-magic-rings .section-heading{
 margin:0 0 12px!important;color:#fff1d6!important;text-align:center;
 justify-content:center;font-size:clamp(16px,4.1vw,21px);
}
body[data-fantasy-theme] #app .luna-magic-rings :is(.boss-ring-metric,.boss-ring-metric.hot,.boss-ring-metric.lime,.boss-ring-metric.cyan){
 position:relative;padding:8px 10px;border:1px solid rgba(var(--fantasy-rgb),.24)!important;
 border-radius:11px!important;background:rgba(21,10,26,.60)!important;background-image:none!important;
 box-shadow:inset 0 0 7px rgba(var(--fantasy-rgb),.05)!important;
 color:#fff5e8!important;
}
body[data-fantasy-theme] #app .luna-magic-rings .boss-ring-metric::before,
body[data-fantasy-theme] #app .luna-magic-rings .boss-ring-metric::after{content:none!important;display:none!important}
body[data-fantasy-theme] #app .luna-magic-rings .boss-ring-metric small{color:#e6c4ac!important}
body[data-fantasy-theme] #app .luna-magic-rings .boss-ring-label{color:#fff4e2!important}
body[data-fantasy-theme] #app .luna-magic-rings .ring-summary-footnote{color:#f0d1b8!important;font-size:10px;line-height:1.3}
body[data-fantasy-theme] #app .luna-magic-rings .boss-ring-layout{align-items:center}
body[data-fantasy-theme] #app .luna-magic-continue{
 display:flex;align-items:center;justify-content:center;gap:15px;
 min-height:63px;margin:2px 0 18px;
 background:linear-gradient(103deg,#9b0b27,#e05227 57%,#f8b652 82%,#bb1935)!important;
 border:2px solid #ffe29f!important;border-radius:20px!important;
 color:#fff9ed!important;font-weight:900;font-size:clamp(17px,4.9vw,23px);
 text-shadow:0 2px 6px rgba(58,10,7,.7);
 box-shadow:0 0 0 2px rgba(139,37,23,.46),0 12px 26px rgba(12,3,8,.28),0 0 24px rgba(var(--fantasy-rgb),.19)!important;
}
body[data-fantasy-theme] #app .luna-magic-continue>span{font-size:32px;line-height:1}
body[data-fantasy-theme] #app .luna-magic-weather{position:relative;z-index:2;margin-top:5px}
body[data-fantasy-theme] #app .luna-magic-weather .weather-card{margin:0!important}
@media(max-width:370px){
 body[data-fantasy-theme] #app .luna-magic-hero-layout{height:clamp(365px,126vw,435px)}
body[data-fantasy-theme] #app .luna-magic-identity{width:55%;}
 body[data-fantasy-theme] #app .luna-magic-figure{left:-85px;top:-25px;width:365px;height:590px}
 body[data-fantasy-theme] #app .luna-magic-identity .welcome-verified{font-size:10px;padding:6px}
 body[data-fantasy-theme] #app .luna-magic-welcome-title{font-size:22px}
 body[data-fantasy-theme] #app .luna-magic-overview{min-height:100px;padding:12px!important}
}
@media(min-width:650px){
 body[data-fantasy-theme] #app .luna-magic-scene{padding-top:28px}
body[data-fantasy-theme] #app .luna-magic-identity{width:50%;right:3%}
 body[data-fantasy-theme] #app .luna-magic-figure{left:-80px}
}
@media(prefers-reduced-motion:reduce){
 body[data-fantasy-theme] #app .luna-magic-figure,
 body[data-fantasy-theme] #app .luna-magic-halo,
 body[data-fantasy-theme] #app .luna-magic-twinkle{animation:none!important}
}
body.visuals-paused[data-fantasy-theme] #app .luna-magic-figure,
body.visuals-paused[data-fantasy-theme] #app .luna-magic-halo,
body.visuals-paused[data-fantasy-theme] #app .luna-magic-twinkle{animation-play-state:paused!important}


/* V33.8.48 · home-screen floating fantasy illustration.
   Draw behind the ORIGINAL home cards in both Manager and Work Schedule.
   Preserve buttons, real counters, existing panels and ordinary app skins. */
body[data-fantasy-theme] #app .app-shell.luna-home-mage-shell{
  position:relative;
  isolation:isolate;
}
body[data-fantasy-theme] #app .luna-home-mage-shell > .luna-home-mage-backdrop{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:clamp(780px,190vw,1260px);
  z-index:0;
  pointer-events:none;
  overflow:visible;
  border:0;
  background:none;
  box-shadow:none;
}
body[data-fantasy-theme] #app .luna-home-mage-shell > :not(.luna-home-mage-backdrop){
  position:relative;
  z-index:1;
}
body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-art{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:visible;
  border:0;
  background:transparent;
  box-shadow:none;
}
body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-figure{
  position:absolute;
  left:clamp(-145px,-21vw,-64px);
  top:clamp(-16px,-3vw,-5px);
  width:clamp(410px,115vw,710px);
  height:clamp(610px,167vw,980px);
  max-width:none;
  object-fit:contain;
  object-position:top left;
  opacity:.83;
  filter:drop-shadow(0 0 21px rgba(var(--fantasy-rgb),.32));
  animation:luna-magic-figure-float 7.2s ease-in-out infinite;
  transform-origin:50% 40%;
}
body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-halo{
  width:clamp(440px,125vw,800px);
  height:clamp(440px,125vw,800px);
  left:-25%;top:25px;
  opacity:.27;
}
body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-twinkle{
  font-size:clamp(13px,4vw,23px);
  opacity:.67;
}
/* A transparent reading fade, not another rectangular image tile.
   On mobile, the right end aligns with the same card edge / viewport side. */
body[data-fantasy-theme] #app .luna-home-mage-backdrop::after{
  content:'';
  pointer-events:none;
  position:absolute;
  z-index:1;
  inset:0;
  right:calc((100% - 100vw)/2);
  background:linear-gradient(90deg,
    rgba(18,4,15,0) 0%,
    rgba(18,4,15,.03) 25%,
    rgba(18,4,15,.12) 44%,
    rgba(18,4,15,.28) 72%,
    rgba(18,4,15,.35) 100%);
}
/* Keep actual homepage banner/cards above the illustration. Glass is translucent
   enough to see the artwork on the left, darker where readable text sits. */
body[data-fantasy-theme] #app .luna-home-mage-shell .banner.glass{
  background:linear-gradient(90deg,
    rgba(16,8,31,.39) 0%,
    rgba(19,8,29,.58) 42%,
    rgba(13,7,26,.86) 100%)!important;
  background-color:transparent!important;
  background-image:linear-gradient(90deg,
    rgba(16,8,31,.39) 0%,
    rgba(19,8,29,.58) 42%,
    rgba(13,7,26,.86) 100%)!important;
}
body[data-fantasy-theme^="maekru-"] #app .luna-home-mage-shell .banner.glass{
  background:linear-gradient(90deg,
    rgba(66,11,25,.28) 0%,
    rgba(53,9,22,.55) 45%,
    rgba(37,6,17,.90) 100%)!important;
  background-image:linear-gradient(90deg,
    rgba(66,11,25,.28) 0%,
    rgba(53,9,22,.55) 45%,
    rgba(37,6,17,.90) 100%)!important;
}
/* The former floating RIGHT-side portrait and LUNA caption must not reappear
   on the fantasy home screen, where a single large figure already exists. */
body[data-fantasy-theme] #app .luna-home-mage-shell .banner .luna-fantasy-banner-art,
body[data-fantasy-theme] #app .luna-home-mage-shell .banner .luna-fantasy-banner-caption{
  display:none!important;
}
/* Undo the old banner's reserved width for its small right-hand illustration. */
body[data-fantasy-theme] #app .luna-home-mage-shell .banner.glass :is(h1,.sub,.employee-position-inline,.stats){
  max-width:100%!important;
}
@media(max-width:380px){
 body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-figure{
   left:-100px;top:0;width:425px;height:650px;
 }
}
@media(min-width:650px){
 body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-figure{
   left:-90px;top:6px;width:min(72vw,710px);height:930px;
 }
}
@media(prefers-reduced-motion:reduce){
 body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-figure,
 body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-halo,
 body[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-twinkle{
   animation:none!important;
 }
}
body.visuals-paused[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-figure,
body.visuals-paused[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-halo,
body.visuals-paused[data-fantasy-theme] #app .luna-home-mage-backdrop .luna-magic-twinkle{
 animation-play-state:paused!important;
}