/* ミラースクラッチ: 共通の明るい外枠の中に、暗い舞台を置く */

.mirror-stage {
  position: relative; overflow: hidden; border-radius: var(--radius-panel);
  background: radial-gradient(ellipse at 50% 0%, #3A3746 0%, var(--color-stage) 70%);
  padding: 16px 0 12px;
}
/* 窓が中心の簡略化したトラック（窓は画像の幅の約70%）。少しだけ大きくして、ガラスを舞台の幅の70%以上にする */
.truck { position: relative; aspect-ratio: var(--ar); width: 104%; margin-left: -2%; }
.truck-body { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }
.mirror-window {
  position: absolute; overflow: hidden; border-radius: 4px; background: #000;
  left: calc(var(--wx) * 1% - .6%); top: calc(var(--wy) * 1% - .8%);
  width: calc(var(--ww) * 1% + 1.2%); height: calc(var(--wh) * 1% + 1.6%);
}
.mirror-under, .mirror-glass { position: absolute; inset: 0; width: 100%; height: 100%; }
.mirror-glass { z-index: 2; touch-action: none; cursor: grab; transition: opacity .4s ease; }
.mirror-glass.is-gone { opacity: 0; pointer-events: none; }

/* 車内（星はここに隠れている） */
.mirror-sky { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(10 6 12 / 30%), rgb(10 6 12 / 30%)), url("themes/mirror/interior.jpg") center / cover; }
.mirror-star {
  position: absolute; transform: translate(-50%, -50%); padding: 24px; font-size: clamp(22px, 6vw, 32px); line-height: 1;
  color: rgb(255 255 255 / 18%); pointer-events: none;
}
.mirror-star.is-found { color: #F6D58A; text-shadow: 0 0 8px rgb(246 213 138 / 80%); animation: star-found .3s var(--ease-ui); }
@keyframes star-found { from { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* 先読み: ひさしのライト（トラック画像の3つのライトの位置）。光り続けはしない */
.truck-lights { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.truck-lights i {
  position: absolute; top: 6%; width: 6%; aspect-ratio: 1; margin: -3% 0 0 -3%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 14%, var(--light, #9ee8ff) 34%, transparent 70%);
}
.truck-lights i:nth-child(1) { left: 38.3%; }
.truck-lights i:nth-child(2) { left: 60.1%; }
.truck-lights i:nth-child(3) { left: 82.9%; }
.truck-lights.is-gold i { --light: #F6D58A; opacity: 1; }
.truck-lights.is-rainbow i { opacity: 1; }
.truck-lights.is-rainbow i:nth-child(1) { --light: #E9628E; }
.truck-lights.is-rainbow i:nth-child(2) { --light: #59C2B3; }
.truck-lights.is-rainbow i:nth-child(3) { --light: #A48BE0; }

/* 舞台の中の短いカットイン */
.stage-cutin {
  position: absolute; left: 50%; top: 8px; z-index: 8; transform: translate(-50%, -6px); opacity: 0; pointer-events: none;
  padding: 4px 14px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text);
  font: 800 0.9375rem/1.3 var(--font-heading); transition: opacity 80ms, transform 80ms;
}
.stage-cutin.is-on { opacity: 1; transform: translate(-50%, 0); }

.star-count { text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.star-count span { color: var(--color-gold); }
.star-count b { font: 800 1.25rem/1 var(--font-heading); }

/* こする場所の案内（最初にさわったら消える。動かさない） */
.scratch-guide {
  position: absolute; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 4px; pointer-events: none;
  left: calc(var(--wx) * 1%); top: calc(var(--wy) * 1%); width: calc(var(--ww) * 1%); height: calc(var(--wh) * 1%);
  font: 700 14px/1.4 var(--font-body); color: #FFF;
}