/* Sound Element - Periodic Table Styles */
:root{
  --bg:#0b0f1a;
  --bg-panel:#11172a;
  --text:#e8ecf7;
  --text-dim:#9aa5c0;
  --border:#232b45;
  --accent:#5ad1e6;

  --c-nonmetal:#3fa796;
  --c-noble-gas:#7c5ce6;
  --c-alkali-metal:#e6634a;
  --c-alkaline-earth:#e6a13d;
  --c-metalloid:#5aa9e6;
  --c-halogen:#e64a80;
  --c-transition-metal:#4a90e6;
  --c-post-transition-metal:#6aa84f;
  --c-lanthanide:#c084fc;
  --c-actinide:#f472b6;
  --c-unknown:#6b7280;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(circle at 20% 0%, #14203a 0%, var(--bg) 55%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.app-header{
  text-align:center;
  padding:24px 16px 12px;
}

.app-header h1{
  margin:0;
  font-size:2rem;
  letter-spacing:0.06em;
  background:linear-gradient(90deg,var(--accent),#9d7bea);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.subtitle{
  color:var(--text-dim);
  margin:6px 0 16px;
  font-size:0.95rem;
}

.controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.ctrl-btn{
  background:var(--bg-panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 18px;
  border-radius:999px;
  cursor:pointer;
  font-size:0.9rem;
  transition:background .2s,border-color .2s,transform .1s;
}
.ctrl-btn:hover{border-color:var(--accent);}
.ctrl-btn:active{transform:scale(0.96);}

.legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;
  max-width:900px;
  padding:0 8px;
}

.legend-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.72rem;
  color:var(--text-dim);
}

.legend-swatch{
  width:12px;
  height:12px;
  border-radius:3px;
  display:inline-block;
  flex-shrink:0;
}

main{
  flex:1;
  padding:8px 12px 24px;
  display:flex;
  justify-content:center;
}

.table-scroll{
  width:100%;
  max-width:1400px;
  overflow-x:auto;
  padding-bottom:8px;
}

.periodic-table{
  display:grid;
  grid-template-columns:repeat(18, minmax(46px, 1fr));
  grid-auto-rows:minmax(46px, 1fr);
  gap:4px;
  min-width:920px;
}

.element{
  position:relative;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:4px 6px;
  cursor:pointer;
  color:#0b0f1a;
  font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
  user-select:none;
  overflow:hidden;
}

.element:hover{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 6px 18px rgba(0,0,0,0.45);
  filter:brightness(1.12);
  z-index:5;
}

.element:active{transform:translateY(-1px) scale(0.98);}

.element.playing{
  outline:2px solid #ffffff;
  outline-offset:1px;
  animation:pulse 0.4s ease;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,0.7);}
  100%{box-shadow:0 0 0 10px rgba(255,255,255,0);}
}

.element .num{
  font-size:0.6rem;
  opacity:0.75;
  line-height:1;
}

.element .sym{
  font-size:0.95rem;
  line-height:1.05;
}

.element .name{
  font-size:0.5rem;
  line-height:1;
  opacity:0.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.element.placeholder{
  background:transparent;
  border:none;
  cursor:default;
  pointer-events:none;
}

/* category colors */
.cat-nonmetal{background:var(--c-nonmetal);}
.cat-noble-gas{background:var(--c-noble-gas);}
.cat-alkali-metal{background:var(--c-alkali-metal);}
.cat-alkaline-earth{background:var(--c-alkaline-earth);}
.cat-metalloid{background:var(--c-metalloid);}
.cat-halogen{background:var(--c-halogen);}
.cat-transition-metal{background:var(--c-transition-metal);}
.cat-post-transition-metal{background:var(--c-post-transition-metal);}
.cat-lanthanide{background:var(--c-lanthanide);}
.cat-actinide{background:var(--c-actinide);}
.cat-unknown{background:var(--c-unknown);}

.info-panel{
  max-width:700px;
  margin:0 auto 20px;
  width:calc(100% - 24px);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 20px;
  min-height:90px;
  display:flex;
  align-items:center;
  gap:20px;
}

.info-placeholder{
  color:var(--text-dim);
  margin:0 auto;
  font-size:0.9rem;
  text-align:center;
}

.info-swatch{
  width:64px;
  height:64px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#0b0f1a;
  font-weight:700;
  flex-shrink:0;
}
.info-swatch .isym{font-size:1.5rem;line-height:1;}
.info-swatch .inum{font-size:0.65rem;opacity:0.8;}

.info-details h2{
  margin:0 0 4px;
  font-size:1.2rem;
}
.info-details p{
  margin:2px 0;
  font-size:0.85rem;
  color:var(--text-dim);
}
.info-details .info-cat{
  color:var(--accent);
  font-weight:600;
}

.app-footer{
  text-align:center;
  color:var(--text-dim);
  font-size:0.75rem;
  padding:10px 0 20px;
}

/* Responsive: tablet */
@media (max-width: 900px){
  .app-header h1{font-size:1.6rem;}
  .periodic-table{
    grid-template-columns:repeat(18, minmax(38px, 1fr));
    min-width:760px;
  }
  .element .name{display:none;}
  .element .sym{font-size:0.85rem;}
}

/* Responsive: mobile -> switch to compact scrollable list-like grid */
@media (max-width: 600px){
  .app-header h1{font-size:1.35rem;}
  .subtitle{font-size:0.82rem;}
  .legend-item{font-size:0.65rem;}
  main{padding:6px 6px 16px;}
  .periodic-table{
    grid-template-columns:repeat(18, minmax(30px, 1fr));
    gap:3px;
    min-width:620px;
  }
  .element{padding:2px 3px;}
  .element .num{font-size:0.5rem;}
  .element .sym{font-size:0.72rem;}
  .info-panel{
    flex-direction:column;
    text-align:center;
    padding:14px;
  }
}