*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Meiryo", "MS Gothic", system-ui, sans-serif;
  color: #fff;
  cursor: none; /* キオスクでカーソル非表示 */
}

/* ── レイアウト ── */
#app {
  position: relative;
  width: 100vw; height: 100vh;
}

#video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s;
  transform: scaleX(-1); /* 鏡像 */
}
#video.visible { opacity: 1; }

/* ── 各画面 ── */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.screen.active { display: flex; }

/* ── アトラクト ── */
#screen-attract { background: #0a0a14; cursor: pointer; }

#char-showcase {
  width: 55vh; height: 55vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 32px;
  transition: background-image 0.6s;
}

.attract-text {
  font-size: clamp(28px, 4vw, 52px);
  color: #ffdc3c;
  letter-spacing: 0.08em;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── スキャン ── */
#screen-scanning { pointer-events: none; }

.scan-hint {
  position: absolute;
  top: 28px; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(18px, 2.4vw, 32px);
  color: #ffff50;
  text-shadow: 0 0 12px rgba(0,0,0,.8);
  white-space: nowrap;
}

#scan-timer {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 22px;
  color: rgba(255,255,255,.5);
}

/* ── 変換中 ── */
#screen-transforming { pointer-events: none; }

.transform-text {
  font-size: clamp(32px, 5vw, 56px);
  color: #50ffc8;
  text-shadow: 0 0 20px #50ffc8aa;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── カウントダウン ── */
#screen-countdown { pointer-events: none; }

#countdown-number {
  font-size: min(60vw, 60vh);
  font-weight: 900;
  color: #ff3c3c;
  text-shadow: 0 0 40px #ff3c3caa;
  line-height: 1;
}

#countdown-number.pop {
  animation: pop 0.25s ease-out;
}

@keyframes pop {
  0%   { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ── シェア ── */
#screen-share {
  background: #000;
}

#captured-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

.share-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 20px 28px;
  background: linear-gradient(to left, rgba(0,0,0,.82) 30%, transparent 100%);
  gap: 16px;
}

/* QRブロック */
#share-qr-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.qr-label {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  letter-spacing: .04em;
}

.qr-box {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.qr-box canvas { display: block; }

.qr-box-sm { padding: 8px; }
.qr-box-sm canvas { width: 130px; height: 130px; }

/* ローカルDLボタン */
#share-download {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 10px;
  background: #4663ff;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.dl-btn-video { background: #22bb66; }

/* ヒントテキスト */
.share-hint-text {
  font-size: clamp(16px, 2vw, 24px);
  color: #ffff50;
  text-shadow: 0 1px 6px #000;
  text-align: right;
}

.share-timer {
  font-size: 18px;
  color: rgba(255,255,255,.55);
}

/* ── 隠しキャンバス ── */
#scan-canvas, #capture-canvas { display: none; }