/* ===== おためし.css ===== */
body{
  margin:0;
  font-family:"Noto Sans JP", sans-serif;
  background:#0e0f14;
  color:#e6e6e6;
}

.header{
  padding:16px;
  background:#141722;
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

nav a {
  margin: 0 10px;
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}


.world-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}

.tab{
  background:#1e2233;
  border:none;
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
}

.tab.active{
  background:#e6d59d;
}

.controls{
  display:flex;
  gap:8px;
}

.controls input,
.controls select{
  padding:8px;
  background:#1b2030;
  border:1px solid #2a3150;
  color:#fff;
  border-radius:8px;
}

main{ padding:16px; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}

.card{
  background:#151922;
  border-radius:14px;
  overflow:hidden;
}

.thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7);
  transition: filter 0.3s, transform 0.3s;
}

.thumb:hover{
  transform: scale(1.03);
  opacity: 0.9;
}

.meta{ padding:8px; font-size:0.9rem; }
.world{ color:#9aa3b2; font-size:0.75rem; }



/* ============================= */
/* ⭐ ライトボックス（右側説明） */
/* ============================= */

.lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  align-items:center;
  justify-content:center;
  z-index:999;
}

.lightbox.open{ display:flex; }

/* ⭐ 横並びにする */
.viewer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  max-width:95vw;
  max-height:90vh;
}

/* ⭐ 画像 */
#lightImg{
  max-width:65vw;
  max-height:85vh;
  object-fit:contain;
}

/* ⭐ 右側テキスト */
#caption,
#story{
  max-width:320px;
  text-align:left;
  white-space:pre-line;
}

#caption{
  font-size:1.1rem;
  font-weight:bold;
  margin-bottom:14px;
}

#story{
  line-height:1.7;
  color:#999999;
}


/* 閉じるボタン */
.close{
  position:fixed;
  top:16px;
  right:16px;
  padding:8px 12px;
  background:#1e2233;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
}



/* ============================= */
/* スマホ（幅600px以下） */
/* ============================= */

@media screen and (max-width: 600px) {

  body{ font-size:14px; }

  .header{ padding:10px; }

  .world-tabs{
    gap:6px;
    justify-content:center;
  }

  .tab{
    padding:6px 10px;
    font-size:0.85rem;
  }

  .controls{
    flex-direction:column;
    align-items:center;
  }

  .controls input,
  .controls select{
    width:90%;
  }

  .grid{
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
  }

  .card{ border-radius:10px; }

  .meta{
    font-size:0.8rem;
    padding:6px;
  }

  .world{ font-size:0.7rem; }

  /* ⭐ スマホでは縦表示に戻す */
  .viewer{
    flex-direction:column;
    gap:20px;
  }

  #lightImg{
    max-width:95vw;
    max-height:60vh;
  }

  #caption,
  #story{
    max-width:90vw;
  }
}