/* El Boneyard — shared UI styles */

/* Menubar layout so music button sits on the right */
#menubar ul {
  display: flex;
  gap: 10px;
  align-items: center;
}
#menubar .music-slot { margin-left: auto; }

/* Music button bevel look */
#musicToggle {
  --bone:#f2eadf; --edge:#2b2b2b;
  border: 0;
  cursor: pointer;
  font: 12px Verdana, Arial, sans-serif;
  color: var(--bone);
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(#1a1a1a, #0e0e0e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 2px 0 var(--edge),
    0 6px 12px rgba(0,0,0,.4);
}
#musicToggle:hover { filter: brightness(1.08); }

/* Fullscreen modal (used by Contact + Guestbook) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.overlay.show { display: flex; }
.popup {
  background:#111;
  color:#f2eadf;
  border:2px solid #8b0000;
  padding:20px 30px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 0 20px #8b0000;
  max-width:340px;
  animation: fadeInUp .6s ease-out;
}
.popup h2 { margin:0 0 8px; }
.popup p  { margin:0 0 12px; }
.popup button {
  margin-top:8px;
  padding:6px 12px;
  background:#8b0000;
  color:#f2eadf;
  border:0;
  border-radius:6px;
  cursor:pointer;
}
.popup button:hover { filter: brightness(1.2); }
@keyframes fadeInUp { from { transform: translateY(40px); opacity:0; } to { transform:none; opacity:1; } }

/* Guestbook card + entries */
.gb-card {
  background: #0f0f0f;
  border: 2px solid #2b2b2b;
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: 0 0 18px rgba(139,0,0,.25);
  max-width: 620px;
  margin: 0 auto;
}
.gb-card h2 { margin: 0 0 12px; font-size: 22px; letter-spacing:.6px; text-shadow:0 1px 0 #000; }
.gb-form .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gb-form .row .field { display:flex; flex-direction:column; }
.gb-form label { margin:10px 0 6px; color:var(--bone); font-size:12px; text-transform:uppercase; letter-spacing:.6px; opacity:.9; }
.gb-form input[type="text"], .gb-form input[type="email"], .gb-form textarea {
  width:100%; box-sizing:border-box; background:#111; color:var(--bone);
  border:1px solid #444; border-radius:8px; padding:9px 11px; font:13px Verdana, Arial, sans-serif; outline:none;
}
.gb-form textarea { resize:vertical; min-height:110px; }
.gb-form input:focus, .gb-form textarea:focus { border-color:#8b0000; box-shadow:0 0 8px rgba(139,0,0,.6); }
.hint { color:#bbb; font-size:11px; opacity:.8; }
.gb-actions { margin-top:14px; display:flex; gap:10px; align-items:center; }
.gb-actions button { padding:9px 16px; background:#8b0000; color:#f2eadf; border:0; border-radius:8px; cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 #2b2b2b; }
.gb-actions button:hover { filter:brightness(1.15); }
.entries { max-width:620px; margin:0 auto; padding:10px 2px 0; }
.entry { padding:8px 0; border-bottom:1px dashed #333; }
.entry:last-child { border-bottom:0; }
.entry strong { color:var(--bone); }
.entry em { color:#aaa; font-size:12px; margin-left:6px; }