/* mask-reveal.css — AR体験画面 */

.mask-reveal-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #0a0a12;
  display: flex;
  flex-direction: column;
}

.mask-reveal-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mask-reveal-overlay {
  position: absolute;
  touch-action: none;
  cursor: grab;
  user-select: none;
  z-index: 10;
}

.mask-reveal-overlay:active {
  cursor: grabbing;
}

.mask-reveal-overlay canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.mask-reveal-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(18, 18, 31, 0.85);
  border-top: 1px solid var(--border, #2a2a4a);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ボタン行 — flex均等化 */
.mask-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
}
.mask-btn-row > .btn {
  flex: 1;
  width: auto;
  min-width: 0;
}
.mask-btn-row > .btn + .btn { margin-top: 0; }

/* 変身/撮影/戻るボタン — サイズ統一 + ダーク背景視認性 */
.mask-reveal-controls .btn {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 14px;
}

.mask-reveal-controls .btn-primary {
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #fff;
}
.mask-reveal-controls .btn-primary:active {
  background: rgba(255, 255, 255, 0.8);
}
.mask-reveal-controls .btn-primary:disabled {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.5);
}

.mask-reveal-controls .btn-ghost {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.mask-reveal-controls .btn-ghost:active {
  background: rgba(255, 255, 255, 0.1);
}

.mask-reveal-controls .control-label {
  font-size: var(--font-xs, 10px);
  color: var(--text-secondary, #6a6a8a);
}

.mask-reveal-controls .slider {
  accent-color: var(--color-primary, #d4a017);
  width: 70px;
}

.mask-reveal-controls .slider-val {
  font-family: monospace;
  font-size: var(--font-xs, 10px);
  color: var(--color-accent, #00e5ff);
  min-width: 28px;
}

/* タメ演出オーバーレイ */
.mask-reveal-anticipation {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.mask-reveal-anticipation canvas {
  image-rendering: pixelated;
}

/* レアリティラベル — 上部に配置 */
.mask-reveal-rarity-label {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 25;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  animation: rarityFadeIn 0.5s ease-out forwards;
  pointer-events: none;
}

.mask-reveal-rarity-label.legendary {
  font-size: 30px;
  color: #ffd700;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.3),
    0 2px 12px rgba(0, 0, 0, 0.8);
  animation: rarityFadeIn 0.5s ease-out forwards, rarityPulse 1.5s ease-in-out 0.5s infinite;
}

/* 待機メッセージ — 顔の輪郭に合わせた縦長楕円 */
.mask-reveal-standby-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 160px;
  height: 220px;
  border-radius: 50% !important;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'DotGothic16', monospace;
  font-size: 14px;
  color: #e0e0e0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  line-height: 2;
  letter-spacing: 0.05em;
  animation: standbyBlink 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes standbyBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes rarityFadeIn {
  from { opacity: 0; transform: scale(0.7) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rarityPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* 戻るボタン — 右上 */
.mask-back-btn {
  z-index: 25;
}

/* AFボタン（下部バー内） */
.mask-af-btn {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 12px;
}
.mask-af-btn.focusing {
  opacity: 0.4;
  pointer-events: none;
}

/* LEGENDARYフラッシュ */
.mask-reveal-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #fff;
  pointer-events: none;
  transition: opacity 300ms ease-out;
}