
/*
 * NekoOne Script Library Room Engine v0.1.3
 */

.nslre-room{
  --nslre-accent:#bb91ff;
  --nslre-accent-soft:#7b58b6;
  --nslre-accent-dark:#39235f;
  --nslre-gold:#d6b66f;
  --nslre-wood-a:#2b1722;
  --nslre-wood-b:#160b12;
  --nslre-paper:#f6edff;
  position:relative;
  width:100%;
  overflow:hidden;
  color:#fff;
  background:#050308;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  isolation:isolate;
}

.nslre-room--rose{
  --nslre-accent:#ffb3cc;
  --nslre-accent-soft:#a14e70;
  --nslre-accent-dark:#56253b;
}

.nslre-room--blue{
  --nslre-accent:#9fcfff;
  --nslre-accent-soft:#446d9e;
  --nslre-accent-dark:#1e3552;
}

.nslre-room--gold{
  --nslre-accent:#f2d18a;
  --nslre-accent-soft:#9a7330;
  --nslre-accent-dark:#4a3515;
}

.nslre-sky{
  position:relative;
  z-index:1;
}

.nslre-sky > .nekoone-sky-stage{
  margin:0!important;
}

.nslre-building{
  position:relative;
  z-index:2;
  min-height:1120px;
  padding:42px 150px 70px;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.32),transparent 130px),
    radial-gradient(circle at 50% 0%,rgba(121,82,184,.16),transparent 36%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 56px),
    linear-gradient(180deg,#110916 0%,#08040c 55%,#030205 100%);
  box-shadow:inset 0 22px 55px rgba(0,0,0,.62);
}

.nslre-building::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.66),transparent 15%,transparent 85%,rgba(0,0,0,.66)),
    radial-gradient(ellipse at center top,transparent 35%,rgba(0,0,0,.38) 100%);
}

.nslre-room__center{
  position:relative;
  z-index:3;
  width:min(980px,100%);
  margin:0 auto;
}

.nslre-room__header{
  position:relative;
  margin:0 auto 28px;
  padding:25px 20px 29px;
  text-align:center;
}

.nslre-room__header::after{
  content:"";
  display:block;
  width:110px;
  height:1px;
  margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--nslre-accent),transparent);
  box-shadow:0 0 12px var(--nslre-accent);
}

.nslre-room__eyebrow,
.nslre-reception__label,
.nslre-showcase__label,
.nslre-section__heading span{
  margin:0;
  color:var(--nslre-accent);
  font-family:Georgia,serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
}

.nslre-room__header h1{
  margin:8px 0 6px;
  color:#fff;
  font-size:clamp(1.7rem,5vw,2.8rem);
  line-height:1.35;
  text-shadow:0 0 22px rgba(187,145,255,.20);
}

.nslre-room__header > p:last-child{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:.9rem;
}

.nslre-shelf{
  position:absolute;
  top:36px;
  z-index:2;
  width:118px;
  height:900px;
  padding:18px 10px 12px;
  border:1px solid rgba(214,182,111,.22);
  border-radius:7px 7px 18px 18px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.04),transparent 18%,transparent 82%,rgba(0,0,0,.24)),
    linear-gradient(160deg,#3a1f2b,#170b12 72%);
  box-shadow:
    0 28px 45px rgba(0,0,0,.55),
    inset 0 0 28px rgba(0,0,0,.55);
}

.nslre-shelf--left{left:18px}
.nslre-shelf--right{right:18px}

.nslre-shelf__crown{
  position:absolute;
  left:-7px;
  right:-7px;
  top:-18px;
  height:22px;
  border:1px solid rgba(214,182,111,.26);
  border-radius:18px 18px 5px 5px;
  background:linear-gradient(#472b36,#1d0d14);
  box-shadow:0 5px 10px rgba(0,0,0,.42);
}

.nslre-shelf__row{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:16.8%;
  padding:8px 5px 7px;
  border-bottom:6px solid #12080d;
  box-shadow:0 6px 7px rgba(0,0,0,.46);
}

.nslre-book{
  display:block;
  flex:1 1 0;
  height:67%;
  min-width:4px;
  max-width:13px;
  border-radius:2px 2px 0 0;
  box-shadow:inset 1px 0 rgba(255,255,255,.12),1px 0 rgba(0,0,0,.5);
  transform-origin:bottom center;
}

.nslre-book:nth-child(3n){height:82%}
.nslre-book:nth-child(4n){height:58%; transform:rotate(3deg)}
.nslre-book:nth-child(5n){height:74%; transform:rotate(-3deg)}

.nslre-book--1{background:linear-gradient(90deg,#5f2146,#a5517a)}
.nslre-book--2{background:linear-gradient(90deg,#243e69,#5680b8)}
.nslre-book--3{background:linear-gradient(90deg,#5b4520,#c29b4c)}
.nslre-book--4{background:linear-gradient(90deg,#3e245f,#8657bd)}
.nslre-book--5{background:linear-gradient(90deg,#1d4d45,#4c9b83)}
.nslre-book--6{background:linear-gradient(90deg,#5e2927,#b7665d)}

.nslre-reception{
  position:relative;
  margin:0 auto 42px;
  padding-top:42px;
}

.nslre-reception__arch{
  position:absolute;
  top:0;
  left:10%;
  right:10%;
  height:138px;
  border:1px solid rgba(187,145,255,.20);
  border-bottom:0;
  border-radius:220px 220px 0 0;
  box-shadow:inset 0 24px 35px rgba(187,145,255,.025),0 -8px 22px rgba(187,145,255,.04);
}

.nslre-reception__desk{
  position:relative;
  min-height:190px;
  padding:28px 155px 34px 115px;
  border:1px solid rgba(214,182,111,.28);
  border-radius:20px 20px 10px 10px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%),
    linear-gradient(155deg,#3a1f2c 0%,#1c0d15 65%,#10070c 100%);
  box-shadow:
    0 26px 48px rgba(0,0,0,.52),
    inset 0 1px rgba(255,255,255,.06),
    inset 0 -18px 24px rgba(0,0,0,.28);
}

.nslre-reception__desk::before{
  content:"";
  position:absolute;
  left:3%;
  right:3%;
  bottom:-14px;
  height:18px;
  border-radius:0 0 13px 13px;
  background:#10070c;
  box-shadow:0 8px 16px rgba(0,0,0,.5);
}

.nslre-reception__copy{
  position:relative;
  z-index:2;
  text-align:left;
}

.nslre-reception__copy h2{
  margin:7px 0 8px;
  font-size:clamp(1.25rem,4vw,1.8rem);
}

.nslre-reception__copy p:last-child{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:.83rem;
  line-height:1.9;
}

.nslre-lamp{
  position:absolute;
  left:28px;
  bottom:39px;
  width:74px;
  height:112px;
}

.nslre-lamp::before{
  content:"";
  position:absolute;
  left:7px;
  top:0;
  width:60px;
  height:58px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,219,144,.35),rgba(255,195,84,.10) 44%,transparent 72%);
  filter:blur(5px);
  animation:nslreLampBreath 5.5s ease-in-out infinite;
}

.nslre-lamp__shade{
  position:absolute;
  left:15px;
  top:18px;
  width:44px;
  height:29px;
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
  background:linear-gradient(#d9c08a,#8b6a35);
  box-shadow:0 0 15px rgba(255,211,120,.26);
}

.nslre-lamp__stem{
  position:absolute;
  left:35px;
  top:45px;
  width:4px;
  height:43px;
  background:linear-gradient(90deg,#6d522a,#d5b66d,#6d522a);
}

.nslre-lamp__base{
  position:absolute;
  left:22px;
  bottom:12px;
  width:32px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(#d3b46b,#5a421e);
}

.nslre-reception__mascot{
  position:absolute;
  right:10px;
  bottom:1px;
  z-index:3;
  width:145px;
  height:165px;
  overflow:visible;
}

.nslre-reception__mascot .nekoone-guide-mascot-engine,
.nslre-reception__mascot [class*="guide-mascot"]{
  margin:0!important;
}

.nslre-showcase{
  position:relative;
  margin:0 auto 52px;
  padding:48px 24px 55px;
}

.nslre-showcase__light{
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:68%;
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(220,196,255,.18),rgba(153,114,214,.03) 75%,transparent);
  filter:blur(9px);
  pointer-events:none;
}

.nslre-showcase__frame{
  position:relative;
  z-index:2;
  padding:26px 20px 24px;
  border:1px solid rgba(187,145,255,.25);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(187,145,255,.10),transparent 46%),
    rgba(13,7,18,.88);
  box-shadow:0 24px 50px rgba(0,0,0,.44),inset 0 0 34px rgba(187,145,255,.025);
  text-align:center;
}

.nslre-showcase__frame h2{
  margin:7px 0 20px;
  font-size:clamp(1.25rem,4vw,1.8rem);
}

.nslre-showcase__portal{
  position:relative;
  text-align:left;
}

.nslre-showcase__pedestal{
  position:relative;
  z-index:1;
  width:72%;
  height:34px;
  margin:-2px auto 0;
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);
  border-top:1px solid rgba(214,182,111,.28);
  background:linear-gradient(#2f1822,#12080d);
  box-shadow:0 18px 28px rgba(0,0,0,.45);
}

.nslre-section{
  position:relative;
  margin:48px 0 0;
  padding:30px 20px;
  border-top:1px solid rgba(255,255,255,.08);
}

.nslre-section__heading{
  margin-bottom:18px;
  text-align:center;
}

.nslre-section__heading h2{
  margin:7px 0 0;
  font-size:clamp(1.2rem,4vw,1.7rem);
}

.nslre-room__footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:55px;
  color:rgba(255,255,255,.76);
  text-align:center;
}

.nslre-room__footer span{
  color:var(--nslre-accent);
  font-size:.72rem;
}

.nslre-room__footer p{
  margin:0;
  font-size:.88rem;
  line-height:1.9;
}

.nslre-ambient{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.nslre-dust{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(236,220,255,.45);
  box-shadow:0 0 6px rgba(187,145,255,.26);
  animation:nslreDustFloat var(--dust-speed,18s) linear infinite;
}

.nslre-dust--1{left:18%;top:18%;--dust-speed:18s;animation-delay:-4s}
.nslre-dust--2{left:34%;top:31%;--dust-speed:22s;animation-delay:-13s}
.nslre-dust--3{left:63%;top:15%;--dust-speed:20s;animation-delay:-8s}
.nslre-dust--4{left:78%;top:38%;--dust-speed:24s;animation-delay:-17s}
.nslre-dust--5{left:24%;top:54%;--dust-speed:19s;animation-delay:-2s}
.nslre-dust--6{left:54%;top:68%;--dust-speed:25s;animation-delay:-19s}
.nslre-dust--7{left:71%;top:76%;--dust-speed:21s;animation-delay:-11s}
.nslre-dust--8{left:42%;top:88%;--dust-speed:23s;animation-delay:-6s}

.nslre-notice{
  position:relative;
  z-index:9;
  margin:10px auto;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:.76rem;
  text-align:center;
}

@keyframes nslreLampBreath{
  0%,100%{opacity:.58;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.04)}
}

@keyframes nslreDustFloat{
  0%{opacity:0;transform:translate3d(0,18px,0)}
  15%{opacity:.42}
  70%{opacity:.22}
  100%{opacity:0;transform:translate3d(12px,-75px,0)}
}

@media(max-width:900px){
  .nslre-building{
    padding:38px 72px 60px;
  }

  .nslre-shelf{
    width:54px;
    padding-left:5px;
    padding-right:5px;
    opacity:.82;
  }

  .nslre-shelf--left{left:7px}
  .nslre-shelf--right{right:7px}

  .nslre-shelf__row{
    gap:2px;
    padding-left:2px;
    padding-right:2px;
  }

  .nslre-reception__desk{
    padding-left:90px;
    padding-right:122px;
  }

  .nslre-lamp{
    left:8px;
    transform:scale(.78);
    transform-origin:bottom center;
  }

  .nslre-reception__mascot{
    right:-3px;
    width:125px;
  }
}

@media(max-width:600px){
  .nslre-building{
    min-height:980px;
    padding:28px 34px 52px;
  }

  .nslre-shelf{
    top:22px;
    width:25px;
    height:760px;
    padding:10px 2px;
    opacity:.68;
  }

  .nslre-shelf--left{left:2px}
  .nslre-shelf--right{right:2px}

  .nslre-shelf__crown{
    left:-2px;
    right:-2px;
    top:-12px;
    height:14px;
  }

  .nslre-shelf__row{
    height:17%;
    gap:1px;
    padding:5px 1px;
    border-bottom-width:4px;
  }

  .nslre-book{
    min-width:1px;
    border-radius:1px 1px 0 0;
  }

  .nslre-room__header{
    padding-left:0;
    padding-right:0;
  }

  .nslre-reception{
    padding-top:28px;
  }

  .nslre-reception__arch{
    left:3%;
    right:3%;
    height:108px;
  }

  .nslre-reception__desk{
    min-height:215px;
    padding:24px 82px 30px 18px;
  }

  .nslre-reception__copy{
    text-align:left;
  }

  .nslre-lamp{
    display:none;
  }

  .nslre-reception__mascot{
    right:-17px;
    bottom:-2px;
    width:105px;
    transform:scale(.86);
    transform-origin:bottom center;
  }

  .nslre-showcase{
    padding-left:0;
    padding-right:0;
  }

  .nslre-showcase__frame{
    padding-left:11px;
    padding-right:11px;
  }

  .nslre-section{
    padding-left:0;
    padding-right:0;
  }

  .nslre-room__footer{
    gap:7px;
  }

  .nslre-room__footer p{
    font-size:.78rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .nslre-lamp::before,
  .nslre-dust{
    animation:none!important;
  }

  .nslre-dust{
    display:none;
  }
}


/* =========================================================
   v0.1.1 MOBILE FRAME & MASCOT BUBBLE PATCH
   - 吹き出しを受付内へ収める
   - スマホで外観枠手前まで部屋を拡張する
   ========================================================= */

.nslre-reception__mascot .nekoone-guide-mascot{
  width:100%;
  max-width:100%;
  justify-content:flex-end;
}

.nslre-reception__mascot .nekoone-guide-mascot__bubble{
  left:auto!important;
  right:calc(var(--nekoone-guide-size,112px) * .58)!important;
  width:min(250px,calc(100vw - 88px))!important;
  max-width:calc(100vw - 88px)!important;
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}

.nslre-reception__mascot .nekoone-guide-mascot__bubble.is-visible{
  animation:nslreMascotBubbleIn .28s ease forwards!important;
}

.nslre-reception__mascot .nekoone-guide-mascot__bubble.is-hiding{
  animation:nslreMascotBubbleOut .3s ease forwards!important;
}

@keyframes nslreMascotBubbleIn{
  from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes nslreMascotBubbleOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(6px) scale(.98)}
}

@media(max-width:600px){
  .nslre-room{
    width:calc(100% + 48px);
    max-width:none;
    margin-left:-24px;
    margin-right:-24px;
  }

  .nslre-reception__mascot .nekoone-guide-mascot__bubble{
    right:58px!important;
    width:min(210px,calc(100vw - 82px))!important;
    max-width:calc(100vw - 82px)!important;
    padding:10px 12px;
    font-size:.74rem;
    line-height:1.65;
  }
}

@media(max-width:390px){
  .nslre-room{
    width:calc(100% + 40px);
    margin-left:-20px;
    margin-right:-20px;
  }

  .nslre-reception__mascot .nekoone-guide-mascot__bubble{
    right:52px!important;
    width:min(198px,calc(100vw - 76px))!important;
    max-width:calc(100vw - 76px)!important;
  }
}


/* =========================================================
   v0.1.2 CENTRAL SECRET PLUSH
   ========================================================= */

.nslre-secret-plush{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:360px;
  margin:18px 0 10px;
  padding:36px 16px 28px;
  text-align:center;
  overflow:visible;
}

.nslre-secret-plush__spotlight{
  position:absolute;
  left:50%;
  top:28px;
  width:min(390px,92%);
  height:300px;
  transform:translateX(-50%);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(208,174,255,.18),rgba(156,105,235,.04) 72%,transparent);
  filter:blur(10px);
  pointer-events:none;
}

.nslre-secret-plush__bubble{
  position:relative;
  z-index:4;
  width:min(390px,92%);
  min-height:48px;
  margin:0 auto 14px;
  padding:12px 16px;
  border:1px solid rgba(205,176,255,.34);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(42,20,61,.96),rgba(17,8,27,.96));
  color:#fff;
  font-size:.84rem;
  line-height:1.8;
  box-shadow:0 12px 30px rgba(0,0,0,.36),0 0 18px rgba(176,126,255,.08);
  opacity:1;
  transition:opacity .2s ease,transform .2s ease;
}

.nslre-secret-plush__bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-9px;
  width:17px;
  height:17px;
  transform:translateX(-50%) rotate(45deg);
  border-right:1px solid rgba(205,176,255,.34);
  border-bottom:1px solid rgba(205,176,255,.34);
  background:#160b22;
}

.nslre-secret-plush__bubble.is-changing{
  opacity:0;
  transform:translateY(5px);
}

.nslre-secret-plush__button{
  position:relative;
  z-index:3;
  display:block;
  width:min(245px,68vw);
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.nslre-secret-plush__button img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.48));
  transition:transform .18s ease,filter .18s ease;
}

.nslre-secret-plush__button:active img{
  transform:scale(.97);
}

.nslre-secret-plush__button:focus-visible{
  outline:2px solid var(--nslre-accent);
  outline-offset:7px;
  border-radius:24px;
}

.nslre-secret-plush__halo{
  position:absolute;
  z-index:1;
  left:50%;
  top:45%;
  width:108%;
  height:70%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(173,117,255,.27),rgba(100,52,180,.07) 55%,transparent 72%);
  filter:blur(11px);
  animation:nslreSecretHalo 5.8s ease-in-out infinite;
}

.nslre-secret-plush__shadow{
  position:absolute;
  z-index:0;
  left:50%;
  bottom:0;
  width:70%;
  height:24px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.62),transparent 72%);
  filter:blur(5px);
}

.nslre-secret-plush__guide{
  position:relative;
  z-index:3;
  margin:13px 0 0;
  color:rgba(255,255,255,.64);
  font-size:.75rem;
  line-height:1.7;
}

@keyframes nslreSecretHalo{
  0%,100%{opacity:.58;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
}

@media(max-width:600px){
  .nslre-secret-plush{
    min-height:320px;
    margin-top:8px;
    padding-left:0;
    padding-right:0;
  }

  .nslre-secret-plush__bubble{
    width:min(300px,94%);
    padding:11px 13px;
    font-size:.78rem;
  }

  .nslre-secret-plush__button{
    width:min(210px,64vw);
  }

  .nslre-secret-plush__guide{
    max-width:260px;
    font-size:.7rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .nslre-secret-plush__halo{
    animation:none!important;
  }

  .nslre-secret-plush__button img,
  .nslre-secret-plush__bubble{
    transition:none!important;
  }
}


/* =========================================================
   v0.1.3 TITLE BAND COLOR PATCH
   白い見出し帯のみを図書館の紫色へ変更
   ========================================================= */

.nslre-room .nslre-reception__copy h2,
.nslre-room .nslre-showcase__frame > h2{
  background:linear-gradient(135deg,#5b3aa8 0%,#2b174d 100%)!important;
  color:#ffffff!important;
  border:1px solid rgba(196,160,255,.55)!important;
  box-shadow:
    0 0 14px rgba(122,84,215,.18),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}
