:root{
  --bg1: #0f1724;
  --bg2: #071029;
  --accent: #d4af37;
  --accent-2: #ffd700;
  --gold: #d4af37;
  --danger: #FF6B6B;
  --muted: #b8956a;
  --card: rgba(139, 90, 43, 0.3);
  --glass: rgba(0, 0, 0, 0.6);
  --success: #5d9e6e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Georgia', serif;
  background: url('Images/MainBack.jpg') center/cover no-repeat fixed;
  color:#f9f1e0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}
.container{
  max-width:1400px;
  margin:18px auto;
  padding:18px;
}
.grid-layout{
  display:grid;
  grid-template-columns:250px 1fr 350px;
  grid-template-rows:auto 1fr auto;
  gap:20px;
}
.topbar{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  background: linear-gradient(135deg, rgba(139, 90, 43, 0.4), rgba(26, 15, 10, 0.6));
  border: 2px solid #8b5a2b;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.topbar .title h1 {
  font-size: 28px;
  color: #d4af37;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
  letter-spacing: 2px;
  margin: 0;
}
.top-actions{display:flex;gap:10px;margin-left:auto}
.left-sidebar{
  padding:20px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(26, 15, 10, 0.8));
  border: 2px solid #8b5a2b;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.left-sidebar h3{
  margin-top:0;
  color:#d4af37;
  font-size: 20px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.inventory-list{margin:12px 0; color: #b8956a;}
.pill{
  background:rgba(139, 90, 43, 0.3);
  padding:10px 12px;
  border-radius:8px;
  display:inline-block;
  border: 1px solid #8b5a2b;
  color: #f9f1e0;
  margin-bottom: 8px;
}

.center-hud{
  padding:20px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(26, 15, 10, 0.8));
  border: 2px solid #8b5a2b;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.center-bottom{display:flex;gap:20px;margin-top:20px}

.right-sidebar{
  padding:20px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(26, 15, 10, 0.8));
  border: 2px solid #8b5a2b;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.profile-card{
  background:linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(0, 0, 0, 0.4));
  padding:20px;
  border-radius:12px;
  border: 2px solid #8b5a2b;
}
.profile-card h3 {
  color: #d4af37;
  font-size: 22px;
  margin: 10px 0;
  text-align: center;
}
.profile-card h4 {
  color: #d4af37;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 6px;
}
.avatar-img{
  width:120px;
  height:120px;
  border-radius:50%;
  display:block;
  margin:10px auto;
  object-fit:cover;
  box-shadow:0 8px 25px rgba(212, 175, 55, 0.4);
  border: 3px solid #d4af37;
}
.profile-row{
  display:flex;
  justify-content:space-between;
  margin:12px 0;
  color:#b8956a;
  font-size: 15px;
}
.profile-row span {
  color: #d4af37;
  font-weight: 600;
}
.xp-wrap{display:flex;align-items:center;gap:8px; margin: 12px 0;}
.xp-bar-wrap{
  background:rgba(0, 0, 0, 0.4);
  height:14px;
  border-radius:10px;
  overflow:hidden;
  flex:1;
  border: 1px solid #8b5a2b;
}
.xp-bar.right{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #d4af37, #ffd700);
  transition:width 600ms ease;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}
.xp-text {
  color: #b8956a;
  font-size: 14px;
}
.daily-timer{
  float: right;
  color: #d4af37;
  font-weight: 600;
  font-size: 0.9em;
  font-family: 'Georgia', serif;
  background: rgba(212, 175, 55, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #8b5a2b;
}
.daily-list{
  list-style: none;
  padding-left: 0;
  color: #b8956a;
}
.daily-list li {
  margin-bottom: 8px;
  padding: 6px;
  background: rgba(139, 90, 43, 0.15);
  border-radius: 6px;
  border-left: 3px solid #8b5a2b;
}
.daily-list input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}
.penalties {
  color: #b8956a;
  font-size: 14px;
  padding: 10px;
  background: rgba(139, 90, 43, 0.15);
  border-radius: 8px;
  border: 1px solid #8b5a2b;
  min-height: 40px;
}
.daily-list input[type="checkbox"]{
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #d4af37;
}
.daily-list label{
  cursor: pointer;
  flex: 1;
}
.daily-list input[type="checkbox"]:checked + label{
  text-decoration: line-through;
  opacity: 0.6;
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.title h1{
  margin:0;
  font-size:1.6rem;
  color: #d4af37;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}
.tag{
  margin:6px 0 0;
  color:#b8956a;
  font-size:0.95rem;
}
.player{display:flex;align-items:center;gap:12px}
.avatar{
  width:56px;height:56px;border-radius:10px;
  background:linear-gradient(135deg, #d4af37, #8b5a2b);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:white;font-size:1.1rem;
  box-shadow:0 8px 20px rgba(212, 175, 55, 0.5);
  border: 2px solid #d4af37;
}
.level-info{font-size:0.95rem;text-align:right; color: #b8956a;}
.progress-card{
  margin-top:18px;
  padding:18px;
  background:linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(0, 0, 0, 0.3));
  border-radius:12px;
  border: 2px solid #8b5a2b;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);
}
.stat-allocation-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  padding:12px 16px;
  background:rgba(139, 90, 43, 0.2);
  border-radius:8px;
  border: 1px solid #8b5a2b;
}
.stat-points-display{
  font-size:1.1rem;
  color:#d4af37;
  font-weight:600;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
.bottom-controls{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(212, 175, 55, 0.2);
}
.bottom-controls .btn{padding:10px 24px;font-size:1rem}
.radar-container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:450px;
  background:rgba(139, 90, 43, 0.1);
  border-radius:12px;
  padding:30px;
  border:2px solid #8b5a2b;
  margin:0 auto;
  max-width:600px;
}
.radar-chart{width:100%;height:100%;min-width:450px;min-height:450px;max-width:500px;max-height:500px;display:block}
.left-hud,.right-hud{display:none}
.stat-points{
  color:#d4af37;
  margin-top:6px;
  font-weight:600;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}
.recent-achievements{color:#b8956a;font-size:0.9rem}
.level-goal{margin-top:8px;font-size:0.9rem;color:#b8956a;display:none}
.quick-controls{display:none}

.alloc-grid{display:grid;gap:8px;margin-top:8px}
.alloc-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px;
  border-radius:8px;
  background:rgba(139, 90, 43, 0.15);
  border: 1px solid rgba(139, 90, 43, 0.3);
}
.alloc-controls{display:flex;gap:8px;align-items:center}

.shop-card{min-width:420px}

.level-goal{margin-top:8px;font-size:0.9rem;color:#b8956a}
.quick-controls{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.quick-label{color:#b8956a}
.quick-buttons{display:flex;gap:8px}
.btn{
  background:linear-gradient(135deg, rgba(139, 90, 43, 0.4), rgba(26, 15, 10, 0.6));
  border:2px solid #8b5a2b;
  color:#d4af37;
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
  transition:all .2s ease;
  font-weight:600;
  text-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
}
.btn:hover{
  background:linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(139, 90, 43, 0.5));
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}
.btn:active{transform:translateY(0px)}
.btn.small{padding:6px 10px;font-size:0.9rem;}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(212, 175, 55, 0.4);
  color:#d4af37;
}
.btn.ghost:hover{
  background:rgba(212, 175, 55, 0.1);
  border-color: #d4af37;
}
.btn.secondary{
  background:linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(139, 90, 43, 0.2));
  border:1px solid rgba(139, 90, 43, 0.5);
}
.btn.secondary:hover{
  background:rgba(139, 90, 43, 0.3);
}
.quests{margin-top:18px}
.quests-header{display:flex;justify-content:space-between;align-items:center}
.quest-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:12px}
.quest-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(0, 0, 0, 0.3));
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.4);
  border: 2px solid #8b5a2b;
  transition: all 0.2s ease;
}
.quest-item:hover{
  box-shadow:0 6px 20px rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}
.quest-main{display:flex;gap:12px;align-items:center}
.quest-title{
  font-weight:600;
  color:#d4af37;
  font-size: 1.05rem;
}
.quest-meta{color:#b8956a;font-size:0.9rem}
.quest-description{
  color: #b8956a;
  font-size: 0.9rem;
  margin-top: 6px;
}
.quest-stats{
  color: #d4af37;
  font-size: 0.85rem;
  margin-top: 4px;
  font-weight: 600;
}
.quest-actions{display:flex;gap:8px;align-items:center}
.empty-note{margin-top:12px;color:#b8956a}
.footer{margin-top:26px;color:#b8956a;font-size:0.9rem}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.modal[aria-hidden="false"]{display:flex}
.modal-card{
  background:linear-gradient(135deg, rgba(139, 90, 43, 0.3), rgba(0, 0, 0, 0.5));
  padding:24px;
  border-radius:12px;
  min-width:320px;
  max-width:420px;
  border: 2px solid #8b5a2b;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.modal-card h3{
  margin-top:0;
  color:#d4af37;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 8px;
}
.modal-card label{
  display:block;
  margin:10px 0;
  color:#b8956a;
  font-weight:600;
}
.modal-card input{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:2px solid #8b5a2b;
  background:rgba(0, 0, 0, 0.4);
  color:#d4af37;
  font-family: 'Georgia', serif;
}
.modal-card input:focus{
  outline: none;
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}

.sung-quote{
  font-style:italic;
  padding:12px 14px;
  border-left:3px solid #d4af37;
  color:#d4af37;
  background:linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent);
  border-radius: 4px;
  margin: 10px 0;
}
.penalty-choices{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

.dungeons{margin-top:18px}
.quest-list .dungeon-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(0, 0, 0, 0.3));
  border: 2px solid #8b5a2b;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}
.quest-list .dungeon-item:hover{
  box-shadow:0 6px 20px rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}
.dungeon-meta{color:#b8956a;font-size:0.9rem}

.quote-vault .quest-title{color:#d4af37}

/* Shop preview carousel */
.shop-preview{display:flex;gap:10px;overflow:hidden;padding:8px 0;margin-bottom:8px}
.shop-card .shop-preview .shop-item{
  min-width:160px;
  max-width:200px;
  border-radius:10px;
  padding:12px;
  background:linear-gradient(135deg, rgba(139, 90, 43, 0.2), rgba(0, 0, 0, 0.3));
  border: 2px solid #8b5a2b;
  position:relative;
}
.shop-item.locked{filter:grayscale(60%) blur(1px);opacity:0.7}
.shop-item .thumb{
  height:72px;
  border-radius:6px;
  background:linear-gradient(90deg, #d4af37, #8b5a2b);
  margin-bottom:8px;
}
.shop-item .meta{color:#b8956a;font-size:0.9rem}
.shop-intro{color:var(--muted);margin-bottom:6px}

/* purchase modal small tweaks */
#purchaseModal .modal-card{min-width:320px}

/* Shop unlock modal animation */
#shopUnlockModal[aria-hidden="false"] .modal-card{animation:unlockPop .9s cubic-bezier(.2,.9,.3,1)}
@keyframes unlockPop{0%{transform:scale(.9);opacity:0}50%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}

@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

/* Confetti canvas sits above content */
#confetti{position:fixed;pointer-events:none;inset:0;z-index:40}

@media (max-width:640px){
  .header{flex-direction:column;align-items:flex-start}
  .player{align-self:stretch;justify-content:space-between}
}

/* ── Utility classes replacing former inline styles ─────────────────── */

/* FOUC prevention: body starts hidden, JS reveals after auth check */
body.page-hidden { visibility: hidden; }

/* Convert to Credits button next to stat points */
.btn-convert { margin-left: 12px; font-size: 0.85em; padding: 6px 12px; }

/* Hint text below stat points header */
.stat-hint { font-size: 0.8em; color: var(--muted); margin-top: 4px; }

/* Scroll / clear-penalty button (hidden by default) */
.btn-scroll { margin-top: 8px; font-size: 0.85em; padding: 6px 12px; }
.hidden { display: none; }

/* Stat rewards section inside Add Quest modal */
.stat-rewards-heading { margin-top: 12px; margin-bottom: 8px; font-size: 0.9em; }
.stat-rewards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-reward-label { font-size: 0.85em; }
.stat-input { padding: 4px; }

/* Settings: hidden file inputs */
.input-hidden { display: none; }

/* Settings: crop modal subtitle */
.crop-subtitle { color: #b8956a; margin-bottom: 15px; }

/* Login page: subtitle paragraph */
.login-subtitle { color: #b8956a; margin-bottom: 30px; }

/* Calendar / Dungeons: initially-hidden panels (toggled by JS) */
.panel-hidden { display: none; }