body {
  font-family: "Zen Maru Gothic", sans-serif;
  margin: 0;
  padding: 40px;
  background: #d3f2ff;
}

.container {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.form-area {
  flex: 1;
  max-width: 400px;
}

.form-area label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

.form-area input,
.form-area select {
  padding: 6px;
  margin-top: 4px;
  box-sizing: border-box;
}

.form-area input[type="text"],
.form-area select,
.form-area input[type="number"] {
  width: 100%;
}

.form-area .inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.form-area .inline select,
.form-area .inline input[type="number"] {
  width: auto;
}

.preview-area {
  flex-shrink: 0;
}





#save-btn {
  margin-top: 16px;
  background: #f8b8c4;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
  cursor: pointer;
  transition: 0.2s;
}

#save-btn:hover {
  background: #f49fb2;
}


.text-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 💥 ここが重要！cardと同じ高さに */
  box-sizing: border-box;
  z-index: 1;
}


.text {
  position: absolute;
  font-size: 24px;
  white-space: pre-wrap;
  font-family: "Yusei Magic", sans-serif;
}

.name {
  position: absolute;
  top: 9.3%;                  /* ← 背景画像に対する位置（％） */
  left: 43%; /* 文頭の位置を調整したい場所に */
  text-align: left;
  font-size: clamp(12px, 3.8vw, 35px);  /* ← 小さすぎず大きすぎずスケーリング */
  font-weight: bold;
  color: #555555;
  white-space: nowrap;
}
.nickname {
  position: absolute;
  top: 17.5%;           /* 約208px ÷ 1185px ≒ 17.5% */
  left: 45.4%;          /* 約355px ÷ 800px ≒ 44.4% */
   text-align: left;
  font-size: clamp(12px, 3.2vw, 30px);
  color: #555555;
  white-space: nowrap;
}

.birthday {
  position: absolute;
  top: 25.4%;           /* 300px ÷ 1185px ≒ 25.3% */
  left: 46.75%;         /* 390px ÷ 800px ≒ 48.75% */
  text-align: left;
  font-size: clamp(12px, 3.2vw, 35px);
  color: #555555;
  white-space: nowrap;
}

.personality {
  position: absolute;
  top: 33.3%;           /* 398px ÷ 1185px ≒ 33.6% */
  left: 43.1%;          /* 345px ÷ 800px ≒ 43.1% */
   text-align: left;
  font-size: clamp(12px, 3.2vw, 27px);
  color: #555555;
  white-space: nowrap;
}

.gender {
  position: absolute;
  top: 24.7%;            /* 299px ÷ 1185px ≒ 25.2% */
  left: 80.1%;           /* 649px ÷ 800px ≒ 81.1% */
  font-size: clamp(12px, 4.2vw, 40px);
  color: #555555;
  white-space: nowrap;
}

.gender-option {
  cursor: pointer;
  font-size: 2em;
  user-select: none;
  transition: transform 0.1s;
}

.gender-option:hover {
  transform: scale(1.2);
}

.platform {
  position: absolute;
  top: 41.8%;            /* 498px ÷ 1185px ≒ 42.0% */
  left: 43.3%;           /* 338px ÷ 800px ≒ 42.3% */
     text-align: left;
  font-size: clamp(12px, 3.2vw, 30px);
  color: #555555;
  white-space: nowrap;
}

.controller {
  position: absolute;
  top: 41.8%;            /* 同上：498px ÷ 1185px */
  left: 64.8%;           /* 502px ÷ 800px ≒ 62.8% */
   text-align: left;
  font-size: clamp(12px, 3.2vw, 30px);
  color: #555555;
  white-space: nowrap;
}

.rank {
  position: absolute;
  top: 4.6%;              /* 装飾枠の縦位置に合わせて調整 */
  left: 20%;
  transform: translateX(-50%);
  font-size: clamp(12px, 2.5vw, 25px);
  color: #555555;
  white-space: nowrap;
  text-align: center;
}


.control {
  position: absolute;
  top: 33.1%;             /* 392px ÷ 1185px ≒ 33.1% */
  left: 33.3%;            /* 254px ÷ 800px ≒ 31.8% */
  transform: translateX(-40%);
  font-size: clamp(14px, 5vw, 52px);  /* こっちは大きめなのでminを14pxに */
  color: #555555;
  white-space: nowrap;
}


.weekday-start {
  position: absolute;
  top: 49.3%;
  left: 52%;
  transform: translateX(-40%);
  font-size: clamp(12px, 2.8vw, 22px);
  color: #555555;
  white-space: nowrap;
}

.weekday-end {
  position: absolute;
  top: 49.3%;
  left: 63%;
  transform: translateX(-40%);
  font-size: clamp(12px, 2.8vw, 22px);
  color: #555555;
  white-space: nowrap;
}

.weekend-start {
  position: absolute;
  top: 52.2%;
  left: 11%;
  transform: translateX(-40%);
  font-size: clamp(12px, 2.8vw, 22px);
  color: #555555;
  white-space: nowrap;
}

.weekend-end {
  position: absolute;
  top: 52.2%;
  left: 22%;
  transform: translateX(-40%);
  font-size: clamp(12px, 2.8vw, 22px);
  color: #555555;
  white-space: nowrap;
}

.vc {
  position: absolute;
  top: 52.2%;
  left: 68.2%;
  
  font-size: clamp(12px, 2.8vw, 23px);
  color: #555555;
  white-space: nowrap;
  text-align: left; 
}

.invite {
  position: absolute;
  top: 55%;
  left: 23.8%;

  font-size: clamp(12px, 2.8vw, 25px);
  color: #555555;
  white-space: nowrap;
  text-align: left; 

}

.advice {
  position: absolute;
  top: 57.6%;
  left: 13.9%;
  text-align: left;
  font-size: clamp(12px, 2.8vw, 25px);
  color: #555555;
  white-space: nowrap;
}

.othergame {
  position: absolute;
  top: 60.7%;
  left: 22.8%;
  text-align: left;
  font-size: clamp(12px, 2.8vw, 25px);
  color: #555555;
  white-space: nowrap;
}


.control-font {
  font-family: 'Rampart One', cursive;
}

/* 🌸 設置画像（カード上の画像）に影＋アニメつき */
.char-image {
  position: absolute;
  object-fit: contain;
  /* filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); 仕上がりに反映しないから一旦オフ*/
  transition: transform 0.2s ease;
  cursor: pointer;
}


.char-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}




/* ✅ 共通クラス（mainとsub共通） */
.character-slot {
  position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.3s ease;
  pointer-events: auto;
}

/* ✅ ポヨン動き（hover, click対応） */
.character-slot:hover,
.character-slot:active {
  transform: scale(1.05) rotate(1deg);
}

/* ✅ メインキャラ専用の位置とサイズ */
#main-char {
  /* 共通 .character-slot を解除し、自前指定に戻す */
  position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 10;
  pointer-events: auto;
  top: 23.7%;
  left: 19.25%;
  transform: translate(-50%, -50%);
  width: clamp(50px, 25vw, 245px);
  height: auto;
}

/* ✅ サブキャラ共通位置（あとで個別微調整も可） */
#char-sub1 {
  position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 1;
  pointer-events: auto;
  top: 43%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: clamp(50px, 16vw, 160px);
  height: auto;
}

#char-sub2 {
 position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 1;
  pointer-events: auto;
  top: 73%;
  left: 09%;
  transform: translate(-50%, -50%);
  width: clamp(30px, 13vw, 120px);
  height: auto;
}

#char-sub3 {
 position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 2;
  pointer-events: auto;
  top: 73%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: clamp(30px, 13vw, 120px);
  height: auto;
}

#char-sub4 {
 position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 3;
  pointer-events: auto;
  top: 73%;
  left: 41%;
  transform: translate(-50%, -50%);
  width: clamp(30px, 13vw, 120px);
  height: auto;
}

#char-sub5 {
 position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 4;
  pointer-events: auto;
  top: 73%;
  left: 57%;
  transform: translate(-50%, -50%);
  width: clamp(30px, 13vw, 120px);
  height: auto;
}

#oshi-char {
  position: absolute;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 4;
  pointer-events: auto;
  top: 74%;
  left: 80.5%;  
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%) rotate(-0deg); 
  width: clamp(30px, 13vw, 145px);  /* サブと同じ大きさ */
  height: auto;
}





.popup {
  position: fixed; /* ←ここをabsoluteからfixedに変えるよ！ */
  background: #fff;
  border: 2px solid pink;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 0 10px #ccc;
  z-index: 999;
}

/* 🌟 ポヨンアニメーション用クラス */
@keyframes click-pop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}



/* クリック時にポヨン*/ 
.char-image.clicked {
  animation: click-pop 0.25s ease;
  animation-fill-mode: forwards;
}



.char-image:hover {
  animation: hover-pop 0.25s ease-in-out;
}




.popup-image:hover {
  animation: hover-pop 0.25s ease-in-out;
}

@keyframes hover-pop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.char-image,
.popup-image {
  transform-origin: center;
  transform: translate(-50%, -50%);
}

.popup-wrapper {
  display: inline-block;
  position: relative;
}

/* popup内だけ transformなしにする */
#character-popup .popup-image,
#outfit-popup .popup-image {
  transform: none !important;
  left: 0 !important;
  position: relative !important;
}

#outfit-popup {
  position: fixed;
  background: #fff;
  border: 2px solid pink;
  border-radius: 12px;
  padding: 12px;
  z-index: 1001;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

  /* 📱デフォルトは大きめでOK */
  width: 255px !important;  
  max-height: 60vh;
  overflow-y: auto;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

@media (max-width: 600px) {
  .popup {
    position: fixed;
    width: 90vw;
    max-height: 60vh;
    overflow-y: auto;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 999 !important;
  }

  .popup-grid {
    grid-template-columns: repeat(3, 1fr); /* スマホ向けに列数を減らす */
  }
}



@media (max-width: 768px) {
  .card {
    width: 100%;
    height: auto;
  }

   

  .text-area .text {
    font-size: 12px;
  }

  /* 必要なら画像にも調整入れる */
  .card img {
    max-width: 100%;
    height: auto;
  }
}


.card {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("img/bg_e1.png");
  margin: 0 auto;
  border: 1px solid #ccc;
  overflow: hidden;

  /* 高さ固定：背景と同じ比率で */
  aspect-ratio: 800 / 1185; /* ← これをちゃんと効かせる！ */
}



/* 💫背景サイズにピッタリ追従する魔法の箱 */
.card-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


#input-greeting {
  position: absolute;
  top: 81%;
  left: 59%;
  transform: translateX(-50%);
  width: clamp(140px, 60vw, 532px);  /* ←中間調整！ */
  height: clamp(75px, 18vw, 168px);
  font-size: clamp(10px, 2.5vw, 28px);
  line-height: 1.3;
  font-family: 'Yusei Magic', sans-serif;
  padding: 8px;
  resize: none;
  background: transparent;
  border: none;
  box-shadow: none;
  resize: none;
  z-index: 10;
  overflow: hidden;
 


}


@media (max-width: 650px) {
  #input-greeting {
    width: 62%;
    height: 13%;
transform: translate(-50%, -10%);
  }
}

@media (max-width: 992px) and (min-width: 600px) {
  .popup {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80vw !important;
    max-height: 65vh;
    padding: 10px;
    overflow-y: auto;
    z-index: 999 !important;
  }
}

  #popup-outfits {
    display: grid !important;                         /* ← 明示的にgrid指定！ */
    grid-template-columns: repeat(3, 1fr) !important; /* スマホでは4列 */
    gap: 6px;
  }





#outfit-popup .popup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 4px !important;
  width: 80% !important;
  max-width: none !important;
  margin: 0 auto !important;
}
#outfit-popup {
  padding: 10px !important;
}


#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(4px);  /* ← 背景ぼかし */
  background-color: rgba(0, 0, 0, 0.3);  /* ← うっすら暗く */
  z-index: 500; /* popupの下にくるように調整してね */
  display: none;
}

.popup {
  position: fixed;
  background: #fff;
  border: 2px solid pink;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 0 10px #ccc;
  z-index: 999;
}

#oshi-popup .popup-image {
  transform: none !important;
  left: 0 !important;
  position: relative !important;
}

.credit a {
  color: #ff99cc;
  text-decoration: none;
  font-weight: bold;
}

.credit a:hover {
  color: #ff66aa;
  text-decoration: underline;
}

#oshi-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  padding: 16px;
  z-index: 1001;

  width: 90vw;            /* 💡画面幅の90%まで */
  max-width: 660px;       /* 💡最大でも660pxを超えない */
  max-height: 60vh;       /* 💡画面の60%の高さ */
  overflow-y: auto;
  overflow-x: auto;   /* 横も必要に応じて！ */

}