/* ============================================================
   YUKINON INTERACTIVE EXPERIENCE
   Loading / DAY-NIGHT / Mini Character
   Ver.1.0.0
   ============================================================ */

html {
  transition:
    background-color .45s ease,
    color .45s ease;
}


/* ============================================================
   THEME
   ============================================================ */

html[data-theme="day"] {
  color-scheme:light;

  --yukinon-theme-bg:#fff8fc;
  --yukinon-theme-panel:#fffdfd;
  --yukinon-theme-ink:#3b2e43;
  --yukinon-theme-muted:#756879;
  --yukinon-theme-line:#ebdce9;
}


html[data-theme="night"] {
  color-scheme:dark;

  --bg:#17131f;
  --paper:#221b2c;
  --ink:#f7edf8;
  --muted:#cbbdcc;

  --pink:#f2a6cc;
  --pink-deep:#f08cbe;
  --pink-soft:#472d42;

  --lav:#9f86c8;
  --lav-deep:#c8b0e4;

  --night:#15101c;
  --line:#493b52;

  --shadow:
    0 26px 80px
    rgba(0,0,0,.34);

  --yukinon-theme-bg:#17131f;
  --yukinon-theme-panel:#221b2c;
  --yukinon-theme-ink:#f7edf8;
  --yukinon-theme-muted:#cbbdcc;
  --yukinon-theme-line:#493b52;
}


html[data-theme="night"] body {
  color:var(--yukinon-theme-ink);
  background:
    radial-gradient(
      circle at 78% 15%,
      rgba(117,88,151,.15),
      transparent 34%
    ),
    #17131f;
}


html[data-theme="night"] .site-header {
  background:rgba(24,18,31,.91);
  border-bottom-color:rgba(113,86,126,.38);
  box-shadow:
    0 12px 38px
    rgba(0,0,0,.18);
}


html[data-theme="night"] .site-header.is-scrolled {
  background:rgba(22,17,29,.97);
  box-shadow:
    0 12px 38px
    rgba(0,0,0,.3);
}


html[data-theme="night"] .nav-link {
  color:#e9ddea;
}


html[data-theme="night"] .nav-link small {
  color:#ad9eb0;
}


html[data-theme="night"] .menu-button span {
  background:#f4eaf4;
}


html[data-theme="night"] .mini-social {
  color:#dfcfe6;
}


html[data-theme="night"] .mini-social:hover {
  background:rgba(238,166,205,.12);
  color:#f2a6cc;
}


html[data-theme="night"] .hero {
  background:#17131f;
}


html[data-theme="night"] .hero::before {
  background:
    radial-gradient(
      circle at 74% 38%,
      rgba(82,62,100,.36) 0 16%,
      rgba(36,27,46,.48) 42%,
      transparent 69%
    ),
    linear-gradient(
      112deg,
      #201824 0%,
      #2d2032 42%,
      #1b1622 67%,
      #15111b 100%
    );
}


html[data-theme="night"] .hero::after {
  background:
    linear-gradient(
      to top,
      rgba(23,18,30,.98),
      rgba(23,18,30,.58) 36%,
      transparent
    );
}


html[data-theme="night"] .hero-left {
  background:#241a29;
}


html[data-theme="night"] .hero-left-wash {
  background:
    linear-gradient(
      90deg,
      rgba(35,25,42,.02),
      transparent 58%,
      rgba(23,18,30,.95) 100%
    ),
    linear-gradient(
      to top,
      rgba(19,14,25,.32),
      transparent 32%
    );
}


html[data-theme="night"] .hero-title {
  color:#fff4fb;
}


html[data-theme="night"] .hero-description,
html[data-theme="night"] .hero-footer-note,
html[data-theme="night"] .favorite-item {
  color:#cbbdcc;
}


html[data-theme="night"] .favorite-icon {
  color:#d8c3e8;
  background:
    linear-gradient(
      145deg,
      rgba(89,52,74,.94),
      rgba(63,51,91,.94)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 10px 26px rgba(0,0,0,.2);
}


html[data-theme="night"] .hero-side-note {
  color:#e1d5e4;
  background:rgba(35,27,44,.82);
  border-color:rgba(120,91,129,.5);
}


html[data-theme="night"] .section,
html[data-theme="night"] .about,
html[data-theme="night"] .gallery-showcase,
html[data-theme="night"] .schedule-showcase,
html[data-theme="night"] .news-showcase,
html[data-theme="night"] .bonus-hub,
html[data-theme="night"] .link-hub {
  color:var(--yukinon-theme-ink);
  background:
    linear-gradient(
      180deg,
      #19141f 0%,
      #211927 100%
    );
}


html[data-theme="night"] .section-heading h2 {
  color:#f8eff8;
}


html[data-theme="night"] .section-heading > p:last-child {
  color:#baacbd;
}


html[data-theme="night"]
:is(
  .profile-card,
  .concept-card,
  .schedule-week-card,
  .schedule-list-section,
  .schedule-event-card,
  .news-card,
  .bonus-portal-card,
  .link-message-card,
  .brand-guide-link,
  .contact-panel
) {
  color:#f6edf7;
  background:
    linear-gradient(
      145deg,
      rgba(40,31,49,.96),
      rgba(31,24,39,.96)
    );
  border-color:rgba(113,87,126,.45);
  box-shadow:
    0 22px 62px
    rgba(0,0,0,.23);
}


html[data-theme="night"]
:is(
  .profile-card,
  .concept-card,
  .schedule-week-card,
  .schedule-list-section,
  .schedule-event-card,
  .news-card,
  .bonus-portal-card,
  .link-message-card,
  .brand-guide-link,
  .contact-panel
) p {
  color:#bfaec2;
}


html[data-theme="night"] .schedule-day {
  color:#eadfeb;
  background:#261d2c;
  border-color:#493a50;
}


html[data-theme="night"] .schedule-day-number,
html[data-theme="night"] .schedule-event-date strong {
  color:#f2e7f2;
}


html[data-theme="night"] .schedule-day.is-today {
  background:
    linear-gradient(
      180deg,
      #42283b,
      #2d2232
    );
  border-color:#9e678c;
}


html[data-theme="night"] .news-dialog-card {
  color:#f5edf6;
  background:#241c2b;
}


html[data-theme="night"] .news-dialog-body p {
  color:#c6b8c9;
}


html[data-theme="night"] .news-dialog-close {
  color:#f6edf6;
  background:rgba(38,28,46,.94);
}


html[data-theme="night"] .scroll-cue {
  color:#d3c5d6;
}


html[data-theme="night"] .mouse {
  border-color:#cdbed0;
}


html[data-theme="night"] .mouse i {
  background:#d7c9da;
}


/* ============================================================
   DAY / NIGHT BUTTON
   ============================================================ */

.yukinon-theme-toggle {
  position:absolute;
  z-index:108;
  top:50%;
  right:clamp(206px,16vw,292px);

  display:flex;
  align-items:center;
  gap:8px;

  min-width:94px;
  height:38px;
  padding:0 12px;

  border:1px solid rgba(122,91,132,.18);
  border-radius:999px;

  color:#65516d;
  background:rgba(255,255,255,.72);

  box-shadow:
    0 8px 24px
    rgba(86,59,93,.08);

  backdrop-filter:
    blur(12px)
    saturate(1.08);

  transform:translateY(-50%);

  cursor:pointer;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}


.yukinon-theme-toggle:hover {
  color:var(--pink-deep);
  border-color:rgba(238,102,173,.36);
}


.yukinon-theme-toggle-icon {
  display:grid;
  place-items:center;

  width:22px;
  height:22px;

  font:700 1rem/1 Arial,sans-serif;
}


.yukinon-theme-toggle-label {
  font:
    800 .61rem/1
    Arial,sans-serif;

  letter-spacing:.12em;
}


html[data-theme="night"] .yukinon-theme-toggle {
  color:#eaddec;
  background:rgba(38,29,46,.82);
  border-color:rgba(170,139,184,.28);

  box-shadow:
    0 9px 26px
    rgba(0,0,0,.25);
}


/* ============================================================
   SITE LOADER
   ============================================================ */

.yukinon-site-loader {
  position:fixed;
  z-index:99999;
  inset:0;

  display:grid;
  place-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(255,255,255,.96),
      rgba(255,244,250,.94) 44%,
      #f2dfeb 100%
    );

  opacity:1;
  visibility:visible;

  transition:
    opacity .6s ease,
    visibility .6s ease;
}


html[data-theme="night"] .yukinon-site-loader {
  background:
    radial-gradient(
      circle at 50% 44%,
      #32263b,
      #211827 48%,
      #130f19 100%
    );
}


.yukinon-site-loader.is-hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}


.yukinon-loader-shell {
  position:relative;

  display:grid;
  justify-items:center;

  width:min(460px,calc(100vw - 48px));

  text-align:center;
}


.yukinon-loader-character {
  position:relative;

  width:clamp(104px,16vw,150px);
  aspect-ratio:1;

  margin-bottom:-18px;

  object-fit:contain;

  filter:
    drop-shadow(
      0 18px 24px
      rgba(77,48,84,.15)
    );

  animation:
    yukinon-loader-float
    2.3s
    ease-in-out
    infinite;
}


.yukinon-loader-logo {
  position:relative;

  width:min(260px,58vw);
  height:auto;
  object-fit:contain;
}


.yukinon-loader-copy {
  margin:15px 0 0;

  color:#92768f;

  font:
    700 .61rem/1.3
    Arial,sans-serif;

  letter-spacing:.28em;
}


html[data-theme="night"] .yukinon-loader-copy {
  color:#cbb7cd;
}


.yukinon-loader-line {
  position:relative;

  width:min(280px,64vw);
  height:2px;

  margin-top:20px;

  overflow:hidden;
  border-radius:999px;

  background:rgba(165,127,158,.18);
}


.yukinon-loader-line::after {
  content:"";

  position:absolute;
  inset:0;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ef87bb 20%,
      #b391d7 72%,
      transparent
    );

  transform:translateX(-100%);

  animation:
    yukinon-loader-progress
    1.25s
    ease-in-out
    infinite;
}


.yukinon-loader-stars {
  position:absolute;
  inset:-70px;

  pointer-events:none;
}


.yukinon-loader-stars span {
  position:absolute;

  color:#eaa5c9;

  font:400 1.1rem/1 Arial,sans-serif;

  opacity:.6;

  animation:
    yukinon-loader-twinkle
    2.6s
    ease-in-out
    infinite;
}


.yukinon-loader-stars span:nth-child(1) {
  left:12%;
  top:24%;
}


.yukinon-loader-stars span:nth-child(2) {
  right:10%;
  top:35%;
  animation-delay:-.8s;
}


.yukinon-loader-stars span:nth-child(3) {
  left:24%;
  bottom:18%;
  animation-delay:-1.6s;
}


.yukinon-loader-stars span:nth-child(4) {
  right:20%;
  bottom:14%;
  animation-delay:-2.1s;
}


@keyframes yukinon-loader-progress {
  0% {
    transform:translateX(-100%);
  }

  65%,
  100% {
    transform:translateX(100%);
  }
}


@keyframes yukinon-loader-float {
  0%,
  100% {
    transform:translateY(0);
  }

  50% {
    transform:translateY(-8px);
  }
}


@keyframes yukinon-loader-twinkle {
  0%,
  100% {
    opacity:.22;
    transform:scale(.8);
  }

  50% {
    opacity:.85;
    transform:scale(1.12);
  }
}


/* ============================================================
   MINI YUKINON
   ============================================================ */

.yukinon-mascot {
  --mascot-size:
    clamp(
      88px,
      8.8vw,
      124px
    );

  --mascot-duration:1600ms;

  position:fixed;
  z-index:96;

  left:0;
  top:0;

  width:var(--mascot-size);
  height:var(--mascot-size);

  pointer-events:none;

  transform:
    translate3d(
      24px,
      calc(
        100svh
        - var(--mascot-size)
        - 22px
      ),
      0
    );

  transition:
    transform
    var(--mascot-duration)
    cubic-bezier(.22,.82,.28,1);

  will-change:transform;
}


.yukinon-mascot-button {
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
  padding:0;

  border:0;
  background:transparent;

  cursor:pointer;
  pointer-events:auto;

  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}


.yukinon-mascot-sprite {
  display:block;

  width:100%;
  height:100%;

  transform-origin:center;
  transition:transform .25s ease;
}


.yukinon-mascot.is-facing-left
.yukinon-mascot-sprite {
  transform:scaleX(-1);
}


.yukinon-mascot-img {
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  filter:
    drop-shadow(
      0 12px 10px
      rgba(55,34,62,.17)
    );

  transform-origin:50% 72%;

  user-select:none;
  -webkit-user-drag:none;

  transition:
    transform .35s ease,
    filter .35s ease;
}


html[data-theme="night"] .yukinon-mascot-img {
  filter:
    drop-shadow(
      0 14px 14px
      rgba(0,0,0,.38)
    )
    drop-shadow(
      0 0 14px
      rgba(174,133,206,.13)
    );
}


.yukinon-mascot.is-walking
.yukinon-mascot-img {
  animation:
    yukinon-mascot-walk
    .48s
    ease-in-out
    infinite;
}


.yukinon-mascot.is-climbing
.yukinon-mascot-img {
  animation:
    yukinon-mascot-climb
    .55s
    ease-in-out
    infinite;
}


.yukinon-mascot.is-perched
.yukinon-mascot-img {
  animation:
    yukinon-mascot-perch
    2.4s
    ease-in-out
    infinite;
}


.yukinon-mascot.is-napping
.yukinon-mascot-img {
  transform:
    rotate(76deg)
    scale(.9);
}


.yukinon-mascot.is-napping::after {
  content:"Z z";

  position:absolute;

  right:-5px;
  top:4px;

  color:#9a73aa;

  font:
    800 .7rem/1
    Arial,sans-serif;

  letter-spacing:.12em;

  animation:
    yukinon-mascot-zzz
    1.9s
    ease-in-out
    infinite;
}


.yukinon-mascot.is-reacting
.yukinon-mascot-img {
  animation:
    yukinon-mascot-hop
    .44s
    ease-out
    1;
}


.yukinon-mascot-bubble {
  position:absolute;

  left:50%;
  bottom:calc(100% - 3px);

  width:max-content;
  max-width:min(270px,calc(100vw - 30px));

  padding:11px 14px 12px;

  border:1px solid rgba(225,188,212,.94);
  border-radius:18px 18px 18px 6px;

  color:#57445d;
  background:rgba(255,253,255,.96);

  box-shadow:
    0 16px 38px
    rgba(69,44,76,.14);

  backdrop-filter:blur(12px);

  opacity:0;
  visibility:hidden;

  transform:
    translateX(-50%)
    translateY(7px)
    scale(.96);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease;

  pointer-events:none;
}


.yukinon-mascot-bubble.is-visible {
  opacity:1;
  visibility:visible;

  transform:
    translateX(-50%)
    translateY(0)
    scale(1);
}


.yukinon-mascot-bubble.is-left {
  left:0;

  transform:
    translateY(7px)
    scale(.96);
}


.yukinon-mascot-bubble.is-left.is-visible {
  transform:
    translateY(0)
    scale(1);
}


.yukinon-mascot-bubble.is-right {
  left:auto;
  right:0;

  transform:
    translateY(7px)
    scale(.96);
}


.yukinon-mascot-bubble.is-right.is-visible {
  transform:
    translateY(0)
    scale(1);
}


html[data-theme="night"] .yukinon-mascot-bubble {
  color:#f5eaf5;
  background:rgba(36,27,43,.96);
  border-color:rgba(148,108,159,.58);

  box-shadow:
    0 17px 42px
    rgba(0,0,0,.34);
}


.yukinon-mascot-bubble-label {
  display:block;

  margin-bottom:5px;

  color:var(--pink-deep);

  font:
    800 .54rem/1
    Arial,sans-serif;

  letter-spacing:.16em;
}


.yukinon-mascot-bubble-text {
  display:block;

  min-width:110px;

  font-size:.72rem;
  line-height:1.65;

  white-space:normal;
}


@keyframes yukinon-mascot-walk {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-5px)
      rotate(1.5deg);
  }
}


@keyframes yukinon-mascot-climb {
  0%,
  100% {
    transform:
      translateX(-2px)
      rotate(-3deg);
  }

  50% {
    transform:
      translateX(3px)
      rotate(4deg);
  }
}


@keyframes yukinon-mascot-perch {
  0%,
  100% {
    transform:rotate(-1deg);
  }

  50% {
    transform:rotate(2deg);
  }
}


@keyframes yukinon-mascot-hop {
  0% {
    transform:translateY(0);
  }

  45% {
    transform:
      translateY(-12px)
      scale(1.03);
  }

  100% {
    transform:translateY(0);
  }
}


@keyframes yukinon-mascot-zzz {
  0%,
  100% {
    opacity:.2;
    transform:translate(0,4px);
  }

  50% {
    opacity:.85;
    transform:translate(4px,-6px);
  }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1100px) {

  .yukinon-theme-toggle {
    right:84px;
  }

}


@media (max-width:760px) {

  .yukinon-theme-toggle {
    right:62px;

    min-width:42px;
    width:42px;

    padding:0;

    justify-content:center;
  }


  .yukinon-theme-toggle-label {
    display:none;
  }


  .yukinon-mascot {
    --mascot-size:
      clamp(
        72px,
        21vw,
        92px
      );

    z-index:94;
  }


  .yukinon-mascot-bubble {
    max-width:min(230px,calc(100vw - 22px));
    padding:10px 12px;
  }


  .yukinon-mascot-bubble-text {
    font-size:.68rem;
  }

}


@media (prefers-reduced-motion:reduce) {

  html,
  body,
  .yukinon-theme-toggle,
  .yukinon-site-loader,
  .yukinon-mascot,
  .yukinon-mascot-img,
  .yukinon-loader-character,
  .yukinon-loader-stars span,
  .yukinon-loader-line::after {
    animation:none !important;

    transition-duration:.01ms !important;
  }

}


/* ============================================================
   YUKINON MINI CHARACTER Ver.2
   Dedicated sprites / richer movement
   ============================================================ */

.yukinon-mascot {
  --mascot-size:
    clamp(
      104px,
      9.5vw,
      142px
    );

  z-index:97;
}


.yukinon-mascot-img {
  object-fit:contain;

  filter:
    drop-shadow(
      0 11px 12px
      rgba(62,38,69,.20)
    );

  transition:
    transform .24s ease,
    filter .24s ease,
    opacity .14s ease;
}


.yukinon-mascot.is-following
.yukinon-mascot-img {
  animation:
    yukinon-mini-follow
    .58s
    ease-in-out
    infinite;
}


.yukinon-mascot.is-peeking
.yukinon-mascot-img {
  animation:
    yukinon-mini-peek
    1.2s
    ease-in-out
    infinite;
}


.yukinon-mascot.is-excited
.yukinon-mascot-img {
  animation:
    yukinon-mini-excited
    .38s
    ease-in-out
    2;
}


.yukinon-mascot.is-napping
.yukinon-mascot-img {
  transform:none;
}


.yukinon-mascot.is-napping::after {
  right:5%;
  top:-2px;

  font-size:.72rem;
}


@keyframes yukinon-mini-follow {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-2deg);
  }

  50% {
    transform:
      translateY(-7px)
      rotate(2deg);
  }

}


@keyframes yukinon-mini-peek {

  0%,
  100% {
    transform:
      translateX(0)
      rotate(-2deg);
  }

  50% {
    transform:
      translateX(7px)
      rotate(3deg);
  }

}


@keyframes yukinon-mini-excited {

  0%,
  100% {
    transform:
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translateY(-12px)
      scale(1.05);
  }

}


@media (max-width:760px) {

  .yukinon-mascot {
    --mascot-size:
      clamp(
        70px,
        20vw,
        84px
      );

    z-index:95;
  }

}


@media (max-width:390px) {

  .yukinon-mascot {
    --mascot-size:
      72px;
  }

}


/* ============================================================
   YUKINON MINI CHARACTER Ver.2.1
   Header collision fix / ground locomotion
   ============================================================ */


/* ------------------------------------------------------------
   DAY / NIGHT
   Desktop:
   Keep clear of X / Instagram / Contact controls.
   ------------------------------------------------------------ */

@media (min-width:1300px) {

  .yukinon-theme-toggle {
    right:
      clamp(
        310px,
        20vw,
        350px
      );
  }

}


@media
  (min-width:1101px)
  and
  (max-width:1299px) {

  .yukinon-theme-toggle {
    right:270px;
  }

}


/* ------------------------------------------------------------
   RUN
   ------------------------------------------------------------ */

.yukinon-mascot.is-running
.yukinon-mascot-img {
  animation:
    yukinon-mini-run
    .27s
    ease-in-out
    infinite;
}


@keyframes yukinon-mini-run {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-3deg);
  }

  50% {
    transform:
      translateY(-8px)
      rotate(3deg);
  }

}


/* Walking is deliberately slower than running. */

.yukinon-mascot.is-walking
.yukinon-mascot-img {
  animation:
    yukinon-mini-ground-walk
    .43s
    ease-in-out
    infinite;
}


@keyframes yukinon-mini-ground-walk {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1.5deg);
  }

  50% {
    transform:
      translateY(-4px)
      rotate(1.5deg);
  }

}


/* Landing / arrival reaction */

.yukinon-mascot.is-arrived
.yukinon-mascot-img {
  animation:
    yukinon-mini-arrived
    .36s
    ease-out
    1;
}


@keyframes yukinon-mini-arrived {

  0% {
    transform:
      translateY(0)
      scale(1);
  }

  45% {
    transform:
      translateY(-7px)
      scale(1.035);
  }

  100% {
    transform:
      translateY(0)
      scale(1);
  }

}


/* Dedicated sleeping asset must not be rotated. */

.yukinon-mascot.is-napping
.yukinon-mascot-img {
  transform:none !important;
}


/* On mobile keep the theme control clear of hamburger. */

@media (max-width:760px) {

  .yukinon-theme-toggle {
    right:64px;
  }

}


/* ============================================================
   YUKINON MOBILE THEME POSITION Ver.2.2
   Keep DAY / NIGHT clear of hamburger menu.
   ============================================================ */

@media (max-width:760px) {

  /*
   * Header right side:
   *
   * [ DAY/NIGHT ]   [ MENU ]
   *
   * Keep the theme button independent from the
   * normal header grid so neither control overlaps.
   */

  .site-header {
    position:fixed;
  }


  .site-header .yukinon-theme-toggle {
    position:absolute;

    top:50%;

    left:auto;

    right:
      calc(
        env(safe-area-inset-right, 0px)
        +
        72px
      );

    width:38px;
    min-width:38px;
    height:38px;

    padding:0;

    margin:0;

    justify-content:center;

    transform:
      translateY(-50%);

    z-index:111;
  }


  .site-header .yukinon-theme-toggle-icon {
    width:20px;
    height:20px;

    font-size:.95rem;
  }


  .site-header .yukinon-theme-toggle-label {
    display:none;
  }


  .site-header .menu-button {
    position:relative;

    z-index:112;

    margin-left:auto;
  }

}


/* iPhone mini / very narrow screens */

@media (max-width:390px) {

  .site-header .yukinon-theme-toggle {
    right:
      calc(
        env(safe-area-inset-right, 0px)
        +
        66px
      );

    width:34px;
    min-width:34px;
    height:34px;
  }


  .site-header .yukinon-theme-toggle-icon {
    width:18px;
    height:18px;

    font-size:.88rem;
  }

}


/* ============================================================
   YUKINON PLAYABLE CHARMS Ver.1
   Drag / swipe / flick / mascot interaction
   ============================================================ */


/*
 * Full-screen physics field.
 * The field itself never blocks page controls.
 */
.yukinon-charm-playground {
  position:fixed;
  z-index:96;

  inset:0;

  pointer-events:none;
  overflow:hidden;
}


/*
 * The original HERO charms are moved here by JavaScript.
 */
.yukinon-charm-playground .charm {
  position:fixed !important;

  /*
   * Do NOT use inset:auto !important here.
   * JavaScript controls left/top for physics.
   */
  right:auto !important;
  bottom:auto !important;

  margin:0 !important;

  pointer-events:auto;

  touch-action:none;

  user-select:none;
  -webkit-user-select:none;

  cursor:grab;

  animation:none !important;

  will-change:
    left,
    top,
    scale,
    filter;

  transition:
    filter .18s ease,
    box-shadow .18s ease;

  filter:
    drop-shadow(
      0 9px 13px
      rgba(74,48,82,.16)
    );
}


.yukinon-charm-playground .charm:active,
.yukinon-charm-playground .charm.is-dragging {
  cursor:grabbing;

  scale:1.09;

  filter:
    drop-shadow(
      0 14px 18px
      rgba(68,42,78,.25)
    );
}


.yukinon-charm-playground .charm.is-flung {
  filter:
    drop-shadow(
      0 15px 20px
      rgba(75,46,85,.24)
    );
}


.yukinon-charm-playground .charm.is-mascot-hit {
  animation:
    yukinon-charm-mascot-hit
    .3s
    ease-out
    1 !important;
}


@keyframes yukinon-charm-mascot-hit {

  0% {
    scale:1;
  }

  40% {
    scale:1.22;
  }

  100% {
    scale:1;
  }

}


html[data-theme="night"]
.yukinon-charm-playground .charm {

  filter:
    drop-shadow(
      0 10px 15px
      rgba(0,0,0,.32)
    )
    drop-shadow(
      0 0 13px
      rgba(193,151,220,.14)
    );

}


/*
 * Mobile touch target.
 */
@media (max-width:760px) {

  .yukinon-charm-playground .charm {
    cursor:default;
  }

}


/*
 * Reduced-motion users can still drag the objects,
 * but autonomous floating is suppressed in JS.
 */
@media (prefers-reduced-motion:reduce) {

  .yukinon-charm-playground .charm {
    animation:none !important;
  }

}


/* ============================================================
   YUKINON CHARM POSITION SAFETY Ver.1
   JS owns left/top coordinates.
   ============================================================ */

.yukinon-charm-playground .charm {
  right:auto !important;
  bottom:auto !important;

  visibility:visible;
  opacity:1;

  transform-origin:center;
}



/* ============================================================
   YUKINON IPAD THEME BUTTON Ver.1
   iPad Pro / tablet portrait collision fix
   ============================================================ */

/*
 * iPad Pro 13 portrait is approximately 1024 CSS px wide.
 *
 * At this width the desktop-style DAY/NIGHT pill becomes too
 * close to the SNS/contact area, so tablets use a compact
 * circular theme button and reserve more horizontal space.
 */
@media
  (min-width:801px)
  and
  (max-width:1180px)
  and
  (hover:none)
  and
  (pointer:coarse) {

  .site-header .yukinon-theme-toggle {
    position:absolute;

    top:50%;

    left:auto;

    /*
     * Leave enough room for the right-hand header controls.
     */
    right:
      clamp(
        205px,
        22vw,
        250px
      );

    width:42px;
    min-width:42px;
    height:42px;

    padding:0;
    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    transform:
      translateY(-50%);

    z-index:111;
  }


  /*
   * The icon alone is clearer at tablet width
   * and prevents the DAY / NIGHT text colliding.
   */
  .site-header
  .yukinon-theme-toggle-label {
    display:none;
  }


  .site-header
  .yukinon-theme-toggle-icon {
    width:22px;
    height:22px;

    display:grid;
    place-items:center;

    font-size:1rem;
  }

}


/*
 * Slightly narrower iPads get a little more breathing room.
 */
@media
  (min-width:801px)
  and
  (max-width:1050px)
  and
  (hover:none)
  and
  (pointer:coarse) {

  .site-header .yukinon-theme-toggle {
    right:
      clamp(
        190px,
        21vw,
        225px
      );
  }

}


/*
 * iPad landscape / larger touch tablets.
 * Keep the full DAY/NIGHT label where there is enough room,
 * but ensure it remains separated from the contact controls.
 */
@media
  (min-width:1181px)
  and
  (max-width:1400px)
  and
  (hover:none)
  and
  (pointer:coarse) {

  .site-header .yukinon-theme-toggle {
    right:
      clamp(
        285px,
        22vw,
        320px
      );
  }

}


/* ============================================================
   YUKINON TOP ONLY CHARMS Ver.1
   Playable charms exist only while viewing the TOP / HERO.
   ============================================================ */

.yukinon-charm-playground {
  opacity:1;
  visibility:visible;

  transition:
    opacity .28s ease,
    visibility .28s ease;
}


.yukinon-charm-playground.is-top-hidden {
  opacity:0;
  visibility:hidden;

  pointer-events:none;
}


.yukinon-charm-playground.is-top-hidden .charm {
  pointer-events:none !important;
}


@media (prefers-reduced-motion:reduce) {

  .yukinon-charm-playground {
    transition:none;
  }

}