body * div {
  /*border: 1px solid red;*/
}

#asset-screen {
  /**/
  position: absolute;
  z-index: 2;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*border-radius: 10px;/*角丸*/
  background: linear-gradient(to bottom, rgba(55, 48, 52, 0.9), rgba(75, 60, 68, 0.5));
  width: 100%;
  height: 100%;
  box-shadow: 6px 6px 10px 0px rgba(51, 48, 48, 0.5);
}


#asset-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;

  border-radius: 12px;

  margin-top: 0px;
  padding: 0px 0px 0px 0px ;

  width: 100%;
  height: 100%;
  /*max-height: 380px; /* ← これはOK */
}
/************************************************/
/* MAIN-HEAD */
#asset-head{
  display: flex;
  flex-direction: row;
  height: 10%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(61, 45, 107, 0.9), rgba(75, 60, 68, 0.5));
}
/* MAIN-HEAD：ハンバーガーボタン  */
#asset-menu{
  height: 100%;
  width: 5%;
  /*padding: 10px;*/
  margin: 0px 10px 0px 10px;
  background: linear-gradient(to bottom, rgba(182, 178, 202, 0.9), rgba(75, 60, 68, 0.5));
  font-family: 'Orbitron', sans-serif;
  font-size: 2.2vw;
  border-radius: 5px;
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items:center;     /*上下中央揃え*/
}
/* MAIN-HEAD：タイトル  */
#asset-title{
  font-family: 'Orbitron', sans-serif;
  display: flex;
  justify-content: left; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
  height: 100%;
  width: 30%;

  font-size: 2vw;
  text-shadow: rgb(88, 4, 53) 1px 0 10px;
}
/* MAIN-HEAD：アセット名 */
#asset-useName{
  display: flex;
  width: 20%;
  margin-right: 20px;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/

  font-size: 1.5vw;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  margin: 2px 2px 2px 2px;
  background: linear-gradient(to bottom, rgba(114, 109, 193, 0.9), rgba(35, 76, 197, 0.9));
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8);
}
/* MAIN-HEAD：詳細情報 */
#asset-info{
  display: flex;
  width: 40%;
  margin-right: 20px;
  justify-content: right; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/

  font-size: 1.5vw;
  text-shadow: 2px 6px 3px rgba(0, 0, 0, 0.9);
  text-shadow: rgb(169, 40, 126) 1px 0 10px;
}
/* MAIN-HEAD：閉じるボタン */
#asset-close{
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/
  width: 5vw;
  margin-right: 3px;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgb(12, 3, 45);
  background: linear-gradient(to bottom, rgba(39, 7, 109, 0.9), rgba(7, 0, 11, 0.5));
}
/************************************************/
/* MAIN-BODY */
#asset-body{
  display: grid;
  grid-auto-flow: column;                 /* 左→右に自動配置 */
  grid-template-rows: repeat(2, auto);    /* 2段固定 */
  overflow-x: auto;                       /* 横スクロール有効 */
  gap: 5px;
  grid-auto-columns: 32%;               /* 各アイテムの横幅 */
  margin-top: 0px;
  padding-left: 1vw;
  overflow-y: hidden;       /* ← Y方向は禁止 */
  -webkit-overflow-scrolling: touch; /* ← iOS用慣性スクロール */
  touch-action: pan-x;      /* ← 横だけスワイプ可に */

}
/* MAIN-BODY: アセットカード */
.asset-card-entry {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 200px;             /* 幅がないとスクロールできない */
  height: 92%;
  z-index: 3;
  background: #222;
  border-radius: 10px;
  color: white;
  overflow: hidden;
  font-family: sans-serif;
  box-shadow: 0 4px 8px rgba(202, 67, 67, 0.2);
  /*border: #ff0000 solid 1px;*/
  padding-top: 3vh;
}
/* MAIN-BODY: アセットカード:画像 */
.asset-card-entry img.thumb {
  width: 90%;
  height: 53%;
  object-fit: contain;
  text-align: center;
  align-items: center;

}
/* MAIN-BODY: アセットカード:タイトル */
.asset-card-entry h3 {
  font-size: 1.5vw;
  margin-top: 0.4vw;
  margin-bottom: 0.5vw;

}
/* アセットカード:ダウンロード */
.asset-download {
  position: absolute; /* 親要素に対して絶対配置 */
  top: 1vw; /* 親要素の上から10px */
  right: 1vw; /* 親要素の右から10px */
  font-size: 2.5vw; /* 絵文字のサイズ */
  cursor: pointer; /* カーソルをポインタにしてクリック可能にする */
  background-color: rgba(0, 0, 0, 0.5); /* 背景に少し透明な黒を設定（オプション） */
  border-radius: 20%; /* 丸い形にする */
  padding: 0px 1px 6px 1px; /* アイコン周りに少し余白を追加 */

}
/* アイコンのホバー時に少しエフェクトを加える */
.asset-download:hover {
  background-color: rgba(49, 45, 81, 0.8); /* 少し背景を濃くする */
}


/* MAIN-BODY: アセットカード:タグ */
/*.asset-card-entry p {
  font-size: 0.8vw;
  color: #666;
  margin: 0 0 0.5rem;
}*/

.button-group {
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
  width: 100%;
  /*border: orangered solid 1px;*/
}

.button-group button {
  color: white;
  border: none;
  padding: 0.4vw 2vw;
  margin-right: 5px;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  font-size: 1.5vw;
  box-shadow: #ffffff 1px 1px 2px 0px inset;
}

/* MAIN-BODY: アセットカード:ボタン */
.asset-card-entry .btn-load {
  background: #1200b3;

}
.asset-card-entry .btn-load:hover {
  background: #5b4fc6;
}
.asset-card-entry .btn-del{
  background: #d31c1c;
}
.asset-card-entry .btn-del:hover {
  background: #e96868;
}
.asset-card-entry .btn-Info{
  background: #6a14ba;
}
.asset-card-entry .btn-Info:hover {
  background: #a455ee;
}
.asset-card-entry .btn-view{
  background: #00aa00;
}
.asset-card-entry .btn-view:hover {
  background: #6bcf6b;
}


/*********************************************/
/* ナビゲーションドロワー*/
.asset-drawer {
  position: fixed;
  left: 0;
  top: 0;
  width: 36.7vw;
  max-width: 400px;
  height: 100%;
  background: #222;
  color: white;
  transform: translateX(-120%);
  transition: transform 0.3s ease;
  z-index: 1000;
  text-align: center;
  background: #3498db;
  background: linear-gradient(to bottom, rgba(54, 119, 184, 0.9), rgba(49, 155, 200, 0.6));
}
.asset-drawer.open {
  transform: translateX(0);
}

#asset-drawer-head {
  display: flex;
  flex-direction: row;
  /*background: #3498db;*/
  background: linear-gradient(to bottom, rgba(0, 67, 134, 0.9), rgba(160, 213, 236, 0.5));
  box-shadow: 0px 2px 2px 0px rgba(47, 0, 255, 0.5), inset 0px -3px 6px -2px
}
#asset-drawer-title {
  font-family: 'Orbitron', sans-serif;
  display: flex;
  width: 80%;
  margin-left: 6%;
  margin-top: 2%;
  margin-bottom: 2%;
  font-size: 2.5vw;
  justify-content: center; /*左右中央揃え*/
  align-items:center;     /*上下中央揃え*/
}
#asset-drawer-btn {
  display: flex;
  width: 20%;
  margin-right: 2%;
  justify-content: right; /*左右中央揃え*/
  align-items:center;     /*上下中央揃え*/
}
.asset-drawer-close-btn{
  font-size: 1.9vw;
  display: flex;
  justify-content: center; /*左右中央揃え*/
  align-items: center;     /*上下中央揃え*/


  border-radius: 5px;
  box-shadow: 2px 2px 4px rgb(213, 212, 216);
  background: linear-gradient(to bottom, rgba(251, 253, 254, 0.9), rgba(194, 197, 201, 0.5));
}
/*********** MENUリスト ****************/
#asset-drawer-list{
  display:grid;
  grid-auto-flow:row;
  grid-template-rows: repeat(3, auto);
  gap: 0vw;
  text-align: left;
  margin-top: 0.5vw;
  /*margin-left: 1.5vw;*/
}
#asset-drawer-list > div {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(220,220,255,0.1));
  padding: 0.1vw 5.1vw;

  border-radius: 6px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  color: rgb(250, 250, 250);
  transition: background 0.2s ease, transform 0.2s ease;
  text-shadow:
    1px 1px 2px black,
    0 0 1em rgb(49, 49, 204),
    0 0 0.2em rgb(232, 232, 242);
  z-index: 1;  /* 子要素が上に来るように */
  position: relative; /* 親要素に影響されない */
}
#asset-drawer-list > div:hover {
  background: rgba(180, 200, 255, 0.9);
  transform: translateX(2px);

}

/*アセット読込（Zip）*/
#asset-drawer-list-read{
  margin: 2px 0;
}
/* アセット（スタンプ）*/
#asset-drawer-list-stamp{
  margin: 2px 0;
}
/* アセット（アバター） */
#asset-drawer-list-avatar{
  margin: 2px 0;
}
/* データベースリセット */
#asset-drawer-list-rest{
  margin: 2px 0;
}
/* 設定 */
#asset-drawer-list-setting{
  margin: 2px 0;
}
/* アセット一覧 */
#asset-drawer-list-assetlist{
  margin: 2px 0;
}
/* サウンドテスト */
#asset-drawer-list-soundtest{
  margin: 2px 0;
}
/* データベース管理 */
#asset-drawer-list-database{
  margin: 2px 0;
}
/* バージョン情報 */
#asset-drawer-list-version{
  margin: 2px 0;
}



/* ランダムアセット */
/* ランダムアセット */
.randomAssetToggleBox {
  margin-top: 5px;
  display: flex; /* 横並びに配置 */
  justify-content: space-between; /* ラベルとトグルスイッチを左右に配置 */
  align-items: center; /* 垂直方向に中央揃え */
}

/* ランダムアセット：ラベル */
.randomAssetToggleBox-label {
  display: flex;
  align-items: center; /* ラベルを縦方向に中央揃え */
}

#randomAssetToggleLavel {
  line-height: 20px; /* トグルスイッチの高さに合わせて調整 */
  font-size: 16px;
  vertical-align: baseline; /* 縦方向に中央揃え */
}

/* トグルスイッチ */
.randomAssetToggleBox-input {
  display: flex;
  justify-content: flex-end; /* トグルスイッチ部分を右揃え */
}

#randomAssetToggle {
  margin-left: 10px; /* 左に余白を追加して調整 */
  margin-top: 0;   /* 上部に余白を追加して調整 */
  width: 40px;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: #ccc;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  vertical-align: middle; /* トグルスイッチの中央揃え */
}

#randomAssetToggle:checked {
  background: #4caf4c;
}

#randomAssetToggle:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

#randomAssetToggle:checked:before {
  left: 22px;
}






/* ランダムアバター */
.randomAvatarToggleBox {
  margin-top: 2px;
  display: flex; /* 横並びに配置 */
  justify-content: space-between; /* ラベルとトグルスイッチを左右に配置 */
  align-items: center; /* 垂直方向に中央揃え */
}

/* ランダムアセット：ラベル */
.randomAvatarToggleBox-label {
  display: flex;
  align-items: center; /* ラベルを縦方向に中央揃え */
  vertical-align: middle; /* トグルスイッチの中央揃え */
}

#randomAvatarToggleLavel {
  line-height: 20px; /* トグルスイッチの高さに合わせて調整 */
  font-size: 16px;
  vertical-align: baseline; /* 縦方向に中央揃え */

}

/* トグルスイッチ */
.randomAvatarToggleBox-input {
  display: flex;
  /*justify-content: flex-end; /* トグルスイッチ部分を右揃え */
  vertical-align: baseline; /* トグルスイッチの中央揃え */
}

#randomAvatarToggle {
  margin-left: 10px; /* 左に余白を追加して調整 */
  margin-top:3px;   /* 上部に余白を追加して調整 */
  width: 40px;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: #ccc;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
  vertical-align: baseline; /* トグルスイッチの中央揃え */
  vertical-align: baseline; /* トグルスイッチの中央揃え */
}

#randomAvatarToggle:checked {
  background: #af4c4c;
}

#randomAvatarToggle:before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

#randomAvatarToggle:checked:before {
  left: 22px;
}


/*********************************************/
/* カード閲覧 */
#view-screen{
  position: absolute;
  display: flex;
  z-index: 3;
  gap: 0.5rem;
  /*border-radius: 12px;*/
  margin-top: 0px;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to bottom, rgba(190, 96, 149, 0.9), rgba(227, 151, 191, 0.5));*/
  /*border-radius: 50px;*/
  /*margin: 20px auto;*/
  /*padding: 20px;*/
  background-color: #fff;
  background-image: linear-gradient(90deg, rgba(194, 168, 204, .5) 50%, transparent 50%),
                    linear-gradient(rgba(194, 168, 204, .5) 50%, transparent 50%);
  background-size: 40px 40px;
  /*
  background-color: #fff;
  background: repeating-linear-gradient( -45deg, #eaf7f8, #eaf3f8 5px, #fff 5px, #fff 13px );
  */

  background-color: #c2a8cc;
  background-image:
    linear-gradient(45deg,
      rgba(233, 219, 239, 1) 25%, rgba(233, 219, 239, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(-135deg,
      rgba(233, 219, 239, 1) 25%, rgba(233, 219, 239, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(-135deg,
      rgba(194, 168, 204, 1) 25%, rgba(194, 168, 204, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(45deg,
      rgba(194, 168, 204, 1) 25%, rgba(194, 168, 204, 1) 25%,
      transparent 25%, transparent 100%),
    linear-gradient(45deg,
      rgba(233, 219, 239, 1) 0%,
      rgba(233, 219, 239, 1) 6%, transparent 6%,
      transparent 11%, rgba(233, 219, 239, 1) 11%,
      rgba(233, 219, 239, 1) 17%, transparent 17%,
      transparent 22%, rgba(233, 219, 239, 1) 22%,
      rgba(233, 219, 239, 1) 28%, transparent 28%,
      transparent 33%, rgba(233, 219, 239, 1) 33%,
      rgba(233, 219, 239, 1) 39%, transparent 39%,
      transparent 44%, rgba(233, 219, 239, 1) 44%,
      rgba(233, 219, 239, 1) 50%, transparent 50%,
      transparent 55%, rgba(233, 219, 239, 1) 55%,
      rgba(233, 219, 239, 1) 61%, transparent 61%,
      transparent 66%, rgba(233, 219, 239, 1) 66%,
      rgba(233, 219, 239, 1) 72%, transparent 72%,
      transparent 77%, rgba(233, 219, 239, 1) 77%,
      rgba(233, 219, 239, 1) 83%, transparent 83%,
      transparent 88%, rgba(233, 219, 239, 1) 88%,
      rgba(233, 219, 239, 1) 94%, transparent 94%,
      transparent 100%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px, 0 0, 20px 20px, 0 0;

}
#view-screen img{
  border-radius: 12px;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
/* ボタン */
#view-screen-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #222;
  color: #fff;
  padding: 0.5em 1em;
  font-size: 1.2em;
  border-radius: 8px;
  cursor: pointer;
  z-index: 9999; /* 最前面に */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: background 0.2s ease;
}

#view-screen-close:hover {
  background: #ff4444;
}





/* アセット（アバター）メイン */
#avatar-body {
  position: relative;
  display: grid;
  grid-auto-rows: minmax(0, 1fr); /* 行を均等にして子の100%を安定させる */
  grid-auto-flow: row;              /* もしくは削除（rowが既定） */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /*grid-template-columns: repeat(4, 1fr); /* 横に4列・均等幅 */
  gap: 1vw; /* アイテム間の隙間 */
  margin-top: 0px;
  overflow-x: auto; /* 横スクロール有効 */
  overflow-y: hidden; /* Y方向は禁止 */
  -webkit-overflow-scrolling: touch; /* iOS用慣性スクロール */
  touch-action: pan-x; /* 横だけスワイプ可に */
  background-color: #222;
  background-image: linear-gradient(90deg, rgba(194, 168, 204, .5) 50%, transparent 50%),
                    linear-gradient(rgba(194, 168, 204, .5) 50%, transparent 50%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px, 0 0, 20px 20px, 0 0;
  height: 100vh; /* 画面の高さに合わせてMAXにする */
  width: 100%; /* 親要素が画面全体をカバー */
  padding: 1vw 1vw 1vw 1vw;
  box-sizing: border-box; /* paddingを含めて計算する */
  /*border: red solid 5px;*/
}

.avatar-asset-item {
  position: relative;
  display: flex;
  height: 100%; /* 高さを自動調整 */
  width: 100%; /* アイテムの横幅を200pxに設定 */
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
  background-color: rgba(34, 219, 154, 0.5);
  padding: 0vw 1vw 0vw 1vw;
  border-radius: 10px;
  flex-direction: column; /* 画像とボタンを縦に並べる */
  box-sizing: border-box; /* paddingを含めて計算する */
  /*border: rgb(60, 0, 255) solid 5px;*/
}

.avatar-asset-img-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 高さを自動調整 */

}

.avatar-asset-img {
  width: 75%; /* 親要素の幅に合わせて広げる */
  height: 100%; /* 親要素の高さに合わせて広げる */
  object-fit:contain; /* 画像が親要素を覆うようにリサイズ */
  padding: 0 1vw 2vh 1vw;
}
/* ボタンボックス */
.avatar-button-container {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 90%;
  padding: 0;
}
.avatar-button-container button {
  margin-right: 5px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.6vw;
  margin: 0vw 0.3vw 0vw 0.3vw;
  padding: 0.7vw 1vw 0.7vw 1vw;
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
  width: 33%;
  border:#000000 solid 1px;
}
/*  アバター:ボタン */
.avatar-load-btn  {
  background: #1200b3BB; /* ← 60%不透明 */
  color: white;
}
.avatar-load-btn:hover {
  background: #5b4fc6BB; /* ← hover時も半透明 */
}
.avatar-del-btn {
  background: #d31c1cBB;
  color: white;
}
.avatar-del-btn:hover {
  background: #cd4747BB;
}
.avatar-info-btn {
  background: #6a14baBB;
  color: white;
}
.avatar-info-btn:hover {
  background: #8b27eaBB;
}

/*
.asset-card-entry .btn-view{
  background: #00aa00;
  color: white;
  border: none;
  padding: 0.2vw 1rem;
  border-radius: 5px;
  margin-bottom: 0.75vw;
  cursor: pointer;
  font-size: 1.2vw;
}
.asset-card-entry .btn-view:hover {
  background: #6bcf6b;
}
*/

/* アバター用ZIPアイコン*/
#avatar-file-icon {
  display: flex;
  position: absolute;
  font-size: 3vw;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 0.5vw;
  cursor: pointer;
  top: 1vw;
  right: 1vw;
}