/* transition.css — Fullscreen transition overlay (chalk -> erase) */

/* Transition overlay */
.transition{
  position: fixed;
  inset: 0;
  z-index: 2147483646; /* 競合に勝つ */
  display: none;
  pointer-events: none;
  isolation: isolate;
}
.transition.active{
  display: block;
  pointer-events: auto; /* 遷移中のクリックをブロック */
}
#transition-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Props layer */
.props{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chalk, .eraser{
  position: absolute;
  left: 0; top: 0;
  transform: translate(-9999px, -9999px);
  will-change: transform, opacity;
  opacity: 0;
}

/* Chalk (CSS-built) */
.chalk{
  width:132px;
  height:30px;
  border-radius: 999px;
  background:
    radial-gradient(24px 18px at 18% 45%, rgba(255,255,255,.95), rgba(235,235,235,.92) 60%, rgba(220,220,220,.88) 100%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,238,238,.92) 55%, rgba(222,222,222,.88)),
    repeating-linear-gradient(90deg, rgba(210,210,210,.12) 0 3px, rgba(255,255,255,0) 3px 8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  border: 1px solid rgba(0,0,0,.18);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  transform-origin: 18% 50%;
}
.chalk::before{
  content:"";
  position:absolute;
  inset:3px 10px 3px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,0));
  pointer-events:none;
  mix-blend-mode: overlay;
}
.chalk::after{
  content:"";
  position:absolute;
  left:-14px; top:6px;
  width:22px; height:18px;
  border-radius: 7px;
  background:
    radial-gradient(10px 10px at 70% 50%, rgba(255,255,255,.96), rgba(220,220,220,.90) 70%, rgba(205,205,205,.85)),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(230,230,230,.92));
  border: 1px solid rgba(0,0,0,.18);
  transform: rotate(-10deg);
}
.chalk-tip{ display:none; }

/* Eraser (image: kokuban_keshi.png) */
.eraser{
  width: 360px;
  height: 140px;

  background-image: url("./assets/kokuban_keshi.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;

  /* Shadow follows PNG alpha */
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.35));
}
.eraser::before{ content:none; }
.eraser-felt{ display:none; }