/* 1️⃣ Global styles */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Segoe UI',Arial,sans-serif;color:#e0e0e0;background:#111}
header{padding:2rem;text-align:center;background:#222}
h1{font-size:2.5rem;font-weight:600}

/* 2️⃣ Rune background (the repeating pattern you already had) */
body::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.05)25%,transparent 25%),
    linear-gradient(225deg,rgba(255,255,255,.05)25%,transparent 25%);
  background-size:50px 50px;
  opacity:.6;
}

/* 3️⃣ Centered rune display */
#rune-container{
  position:absolute;
  inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
}
.rune-symbol{font-size:26rem;font-weight:bold;margin-bottom:.15rem}
.rune-name{font-size:2.5rem;font-style:italic;margin-bottom:.3rem}
.rune-interpretation{
  max-width:60%;margin:auto;
  font-size:1.2rem;line-height:1.4
}

/* 4️⃣ Button */
footer{
  position:absolute;bottom:20px;width:100%;
  display:flex;justify-content:center;gap:10px;
}
#new-rune-btn{
  padding:.8rem 1.5rem;font-size:1rem;background:#3a6e23;color:white;border:none;
  cursor:pointer;border-radius:4px;transition:background .2s
}
#new-rune-btn:hover{background:#5a9127}

/* 5️⃣ Responsive tweak */
@media(max-width:600px){
  .rune-symbol{font-size:6rem}
  .rune-name{font-size:1.8rem}
  .rune-interpretation{font-size:1rem}
}