/* =========================================================
   たべっ子どうぶつ MIRAI LAB ～星降るキラリウム～ 入力側アプリ
   §16改訂版：デザイナーのフルスクリーン完成画像を背景に敷き、
   透明タップ領域＋動的表示（X/5・進捗星・クリア印）だけを重ねる。
   CSSで背景・カード・ボタンを再現しない。
   ========================================================= */
:root {
  --bg: #002878;       /* レターボックス地色（画像端と一致） */
  --maxw: 460px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #001134; color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}

#app {
  position: relative;
  width: 100%; max-width: var(--maxw); height: 100%;
  margin: 0 auto; background: var(--bg);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* =========================================================
   画像背景ステージ（アスペクト 1081:1921 を厳守＝%座標が画像と一致）
   ========================================================= */
.stage {
  position: relative;
  height: 100%; aspect-ratio: 1081 / 1921; max-width: 100%;
  margin: 0 auto; background: var(--bg);
  container-type: size;   /* オーバーレイ文字を cqh/cqw でステージ基準にする */
}
.stage .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill;            /* 箱が画像と同アスペクトなので歪まない */
  display: block;
  user-select: none; -webkit-user-drag: none;
}
.overlays { position: absolute; inset: 0; z-index: 2; }

/* 透明タップ領域（見た目は画像のまま・機能だけ付与） */
.hot {
  position: absolute; background: transparent; border: 0; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hot:active { background: rgba(255,255,255,.12); border-radius: 12px; }
.hot[disabled] { cursor: default; }
.hot[disabled]:active { background: transparent; }

/* 動的：獲得数 X/5 の「数字」（焼き込み「0」は画像から消去済み。ここで数字だけ描く） */
.ov-count {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; line-height: 1;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* 動的：進捗の大きな星（透過6段階を焼き込み星の上に重ねる＝同一アートで一致） */
.ov-star { position: absolute; }
.ov-star img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 14px rgba(255,230,0,.35)); }

/* 動的：エリアボタンの「クリア」印（クリア済はオリーブ調で覆い＋金星＋クリア） */
.ov-clear {
  position: absolute; border-radius: 14px;
  background: linear-gradient(180deg, rgba(150,150,86,.92), rgba(120,120,60,.94));
  border: 2px solid rgba(255,255,255,.45);
  display: flex; align-items: center; justify-content: center;
}
.ov-clear .badge {
  height: 92%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: url("../assets/star/5.png") center/contain no-repeat;
  color: #ff2f8e; font-size: 2.4cqh; font-weight: 900;
  text-shadow: 0 1px 1px rgba(255,255,255,.7); transform: rotate(-8deg);
}

/* 動的：5/5 で「送る」を活性に見せる金色オーバーレイ */
.ov-send-on {
  position: absolute; border-radius: 999px;
  background: linear-gradient(180deg, #fff36b, #ffd400);
  box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 14px rgba(255,230,0,.5);
  display: flex; align-items: center; justify-content: center;
  color: #1a1a1a; font-weight: 800; letter-spacing: .03em;
}

/* =========================================================
   カメラ / スキャン（実カメラ表示）
   ========================================================= */
.cam-layer { position: absolute; inset: 0; z-index: 30; background: #000; }
.cam-label { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; font-size: 15px; color: #fff; z-index: 3; text-shadow: 0 1px 3px #000; }
.cam-video, .cam-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cam-controls { position: absolute; left: 0; right: 0; bottom: calc(34px + env(safe-area-inset-bottom)); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cam-btn {
  min-width: 200px; padding: 15px 28px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #fff, #e9eefc); color: #11235a;
  font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 14px rgba(0,0,0,.5);
}
.cam-btn:active { transform: translateY(2px); }
.cam-ghost { padding: 9px 22px; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; background: transparent; color: #fff; font-weight: 700; cursor: pointer; }
.cam-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 23px; cursor: pointer; }
.scan-frame { position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 64%; max-width: 280px; aspect-ratio: 1; z-index: 3; }
.scan-frame span { position: absolute; width: 40px; height: 40px; border: 4px solid #ff3b3b; }
.scan-frame span:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.scan-frame span:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.scan-frame span:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.scan-frame span:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }
.scan-hint { position: absolute; left: 0; right: 0; bottom: calc(110px + env(safe-area-inset-bottom)); text-align: center; z-index: 3; font-size: 14px; color: #fff; text-shadow: 0 1px 3px #000; line-height: 1.7; }

/* =========================================================
   モーダル（会場MAP / 各種案内：#002878 基調 §16-2）
   ========================================================= */
.modal-root { position: absolute; inset: 0; z-index: 40; background: rgba(0,8,32,.78); display: flex; align-items: center; justify-content: center; padding: 28px; }
.modal-card {
  width: 100%; max-width: 340px; background: linear-gradient(180deg, #0b3aa0, #002878);
  border: 2px solid rgba(160,190,255,.55); color: #fff; border-radius: 20px;
  padding: 26px 22px; text-align: center; box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.modal-text { font-size: 17px; font-weight: 800; line-height: 1.7; margin: 4px 0 20px; white-space: pre-line; }
.modal-actions { display: flex; gap: 12px; justify-content: center; }
.modal-btn { min-width: 120px; padding: 12px 20px; border: 0; border-radius: 999px; background: #ffe600; color: #1a1a1a; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 #b89b00; }
.modal-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b89b00; }

/* QA/デバッグ：ホットスポット可視化（?debug=1） */
.debug .hot { background: rgba(255,0,0,.22); outline: 1px solid rgba(255,0,0,.7); }