/* styles.css
   Shared styles for the world pages.
   Put this file in the same folder as ashpeak.html and master-catalog.html
*/

/* Colors & variables */
:root{
  --bg: #1f1f1f;
  --panel: #282828;
  --muted: #bfbfbf;
  --accent: #c62828;
  --accent-soft: #ff6f6f;
  --radius: 12px;
  --gap: 12px;
  --showcase-height: clamp(280px, 42vh, 530px);
}

html,body{
  margin:0; padding:0; height:100%; background:var(--bg); color:var(--muted);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Outer wrapper */
.wrap{
  min-height:100vh;
  box-sizing:border-box;
  padding-left: calc(50px * 8);  /* your provided heavy padding */
  padding-right: calc(50px * 8);
  padding-top:18px;
  padding-bottom:22px;
}

/* Slim header */
.slim-header{
  display:flex; align-items:center; justify-content:center;
  gap:12px;
  padding:10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.03);
  margin-bottom: 14px;
}
.slim-header h1{ margin:0; color:#fff; font-size:1.05rem; }
.slim-header p{ margin:0; font-style:italic; color:var(--muted); font-size:0.9rem; }

/* Three-column layout */
.row.panel { display:flex; align-items:stretch; gap:0; }

/* Left column */
.thumb-area{ padding:12px; }
.thumb-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  max-height: calc(var(--showcase-height) - 16px);
  overflow-y: auto;
  padding-top:8px;
  box-sizing:border-box;
}
.thumb-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:8px; border-radius:10px; border:1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  cursor:pointer; transition:transform 150ms ease, box-shadow 150ms ease;
  min-height:86px; position:relative; z-index:1;
}
.thumb-btn img{ width:64px; height:64px; object-fit:cover; border-radius:8px; }
.thumb-label{ font-size:0.78rem; color:var(--muted); }

/* Hover/active */
.thumb-btn:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.6); z-index:40; border-color:var(--accent); }
.thumb-btn.active{ border:2px solid var(--accent); transform:translateY(-6px); z-index:40; }

/* Center image */
.image-col{ padding:12px; display:flex; align-items:center; justify-content:center; }
.image-frame{
  width:100%; height:var(--showcase-height); border-radius:var(--radius);
  padding:12px; border:1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
  box-shadow:0 12px 30px rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.image-frame img{ width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; }

/* Right description */
.desc-col{ padding:12px; }
.desc-panel{
  height:var(--showcase-height);
  overflow-y:auto;
  padding:16px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
}
.desc-panel h2{ margin:0 0 8px 0; color:#fff; }
.desc-meta{ color:var(--muted); margin-bottom:8px; }
.section-title{ color:var(--muted); margin-top:10px; margin-bottom:6px; }
.props-list{ color:#eaeaea; margin:0 0 8px 0; padding-left:18px; }
.rarity-badge{ display:inline-block; padding:4px 9px; border-radius:999px; font-weight:600; color:#fff; margin-left:8px; }

/* Slim scrollbars */
.thumb-grid::-webkit-scrollbar, .desc-panel::-webkit-scrollbar{ width:8px; }
.thumb-grid::-webkit-scrollbar-thumb, .desc-panel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.06); border-radius:8px; }
.thumb-grid, .desc-panel{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.06) transparent; }

/* Responsive */
@media (max-width: 991.98px){ :root{ --showcase-height: clamp(240px, 33vh, 440px); } }
@media (max-width: 575.98px){
  .row.panel { flex-direction: column; }
  .thumb-grid{ display:flex; flex-direction:row; gap:10px; overflow-x:auto; max-height:120px; }
  .image-frame, .desc-panel { height:auto; }
  .desc-panel{ max-height:40vh; }
  .wrap{ padding-left:14px; padding-right:14px; }
  :root{ --showcase-height: auto; }
}