/* ====== BASIC STYLING ====== */
body {
  margin:0; font-family:'Segoe UI',sans-serif;
  background:black; color:gold; overflow-x:hidden;
}

.dragon-bg {
  position: fixed; width:200%; height:100%;
  background:url('dragon.png') no-repeat center;
  background-size:contain; opacity:0.05;
  animation:dragonMove 60s linear infinite; z-index:0;
}

@keyframes dragonMove {from{transform:translateX(0);}to{transform:translateX(-50%);} }

.container {
  position: relative; z-index:1; max-width:700px; margin:40px auto;
  padding:20px; background:rgba(20,0,0,0.9);
  border:2px solid gold; border-radius:20px; box-shadow:0 0 30px red;
}

.header{text-align:center;}
.logo{width:70px;}
.controls{text-align:center; margin:20px 0;}
input{padding:10px; width:60%; border-radius:8px; border:1px solid gold; background:black; color:gold;}
button{padding:10px 20px; margin:5px; border:none; border-radius:8px; background:gold; color:black; font-weight:bold; cursor:pointer; transition:0.3s;}
button:hover{background:red; color:white;}

.table{margin-top:20px; border-top:1px solid gold;}
.row{display:flex; justify-content:space-between; padding:12px; border-bottom:1px solid gold; font-size:18px;}

/* ====== FOOTER ====== */
footer{
  text-align:center; padding:15px; background:rgba(0,0,0,0.8);
  color:gold; font-weight:bold; font-size:16px;
  position:fixed; bottom:0; width:100%;
}

/* ====== LOADING OVERLAY ====== */
#loadingOverlay{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center;
  z-index:1000; flex-direction:column; display:none;
}
#loadingOverlay .spinner{
  border: 8px solid rgba(255,215,0,0.2);
  border-top: 8px solid gold; border-radius:50%; width:80px; height:80px;
  animation:spin 1s linear infinite; margin-bottom:20px;
}

/* ====== DEVTOOLS OVERLAY ====== */
#devOverlay{
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.9); color:gold;
  display:flex; justify-content:center; align-items:center;
  flex-direction:column; font-size:40px; font-weight:bold; z-index:9999;
  text-align:center; padding:20px; display:none;
}
#devOverlay .spinner{
  border: 8px solid rgba(255,215,0,0.2);
  border-top: 8px solid gold; border-radius:50%; width:80px; height:80px;
  animation:spin 1s linear infinite; margin-bottom:20px;
}

@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}