/* ===== Cryptic Conclave – global stylesheet ===== */

/* Reset & root ----------------------------------------------------------- */
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Cinzel',serif;
  color:#e0e0e0;line-height:1.6;
  background:#0a0a0a;
  background-image:linear-gradient(rgba(0,0,0,.48),rgba(0,10,10,.54)),
                   url('/images/crypt-background.jpg?v=3');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}

/* Layout shells ---------------------------------------------------------- */
.wrapper{display:flex;flex-direction:column;min-height:100vh}
header{padding: 30px 20px 20px;text-align:center;z-index:3}
header a{display:inline-block}
header img{width:200px;display:block;margin:-25px auto}

/* Page title */
h1{
  font-size:3em;
  margin:10px 0 0;            /* keep top gap, remove bottom gap */
  color:#00cccc;
  text-shadow:0 0 10px #00cccc,0 0 20px #00cccc,0 0 30px #00cccc;
  animation:flicker 3s infinite;
}
@keyframes flicker{0%,100%{opacity:1}50%{opacity:.95}}

main{flex:1}

/* Main container – top margin reduced to tighten gap under title */
.container{
  max-width:1200px;
  margin:10px auto 40px;      /* top 10px, horizontal auto, bottom 40px */
  padding:30px;
  background:rgba(10,10,10,.8);
  border:2px solid #00cccc;
  border-radius:15px;
  box-shadow:0 0 30px rgba(0,255,255,.3);
  text-align:center;
  position:relative;
}

.back-link{
  color:#00cccc;text-decoration:none;font-weight:700;
  display:inline-block;margin-bottom:20px;
  transition:color .3s;
}
.back-link:hover{color:#00ffff;text-shadow:0 0 5px #00ffff}

/* Footer ----------------------------------------------------------------- */
footer {
  text-align: center;
  padding: 20px;
  border-top: 2px solid #00cccc;
  background: rgba(15,15,15,0.9);
}
footer a {
  color: #00cccc;
  text-decoration: none;
  margin: 0 10px;
}
footer a:hover {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff;
}
footer p {
  margin: 5px 0;
  color: #e0e0e0;
}

/* Small-screen tweaks */
@media(max-width:768px){
  h1{font-size:2.5em}
}

/* ==== site-wide custom cursors ==== */

/* 1) Default skull cursor everywhere */
body {
  cursor:
    url('/images/pointer.cur') 6 0,
    url('/images/pointer.png') 6 0,
    auto;
}

/* 2) Skeleton-hand cursor on hover */
a:hover,
button:hover,
.card:hover,
.back-link:hover,
.top-button:hover {
  cursor:
    url('/images/hover.cur') 11 0,
    url('/images/hover.png') 11 0,
    pointer;
}

/* particles container: full viewport, behind all content */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* allow clicks/text selection through the canvas */
#tsparticles canvas {
  pointer-events: none;
}