/* ============================================
   SCROLLS OF TAMRIEL ONLINE - STYLES
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#0a0804;color:#f0e8d8;font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:rgba(26,20,8,0.8)}
::-webkit-scrollbar-thumb{background:rgba(218,165,32,0.3);border-radius:3px}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 10px rgba(218,165,32,0.2)}50%{box-shadow:0 0 25px rgba(218,165,32,0.4)}}
@keyframes swordSlash{0%{transform:rotate(-30deg) scale(0.8);opacity:0}30%{transform:rotate(15deg) scale(1.1);opacity:1}60%{transform:rotate(5deg) scale(1);opacity:1}100%{transform:rotate(0deg) scale(1);opacity:0}}
@keyframes damageFlash{0%{background:rgba(220,53,69,0.3)}100%{background:transparent}}
@keyframes xpFloat{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-40px)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes dragonFly{0%{transform:translateX(-5px) translateY(0)}25%{transform:translateX(0) translateY(-3px)}50%{transform:translateX(5px) translateY(0)}75%{transform:translateX(0) translateY(3px)}100%{transform:translateX(-5px) translateY(0)}}
@keyframes fireFlicker{0%,100%{opacity:0.8;text-shadow:0 0 8px #ff4500,0 0 15px #ff6600}50%{opacity:1;text-shadow:0 0 12px #ff4500,0 0 25px #ff6600,0 0 35px #ff8c00}}

.animate-fadeIn{animation:fadeIn .3s ease-out forwards}
.animate-fadeInUp{animation:fadeInUp .5s ease-out forwards}
.animate-slideUp{animation:slideUp .4s cubic-bezier(.32,.72,0,1) forwards}
.animate-scaleIn{animation:scaleIn .3s ease-out forwards}
.animate-pulseGlow{animation:pulseGlow 2s infinite}
.animate-breathe{animation:breathe 4s ease-in-out infinite}
.animate-dragon{animation:dragonFly 4s ease-in-out infinite}
.animate-fire{animation:fireFlicker 1.5s ease-in-out infinite}
.stagger-1{animation-delay:.05s;opacity:0}.stagger-2{animation-delay:.1s;opacity:0}.stagger-3{animation-delay:.15s;opacity:0}
.stagger-4{animation-delay:.2s;opacity:0}.stagger-5{animation-delay:.25s;opacity:0}.stagger-6{animation-delay:.3s;opacity:0}

/* PANELS */
.panel{background:linear-gradient(145deg,rgba(26,20,8,0.95),rgba(17,14,6,0.98));border:1px solid rgba(218,165,32,0.15);border-radius:12px;backdrop-filter:blur(10px)}
.panel-dark{background:rgba(10,8,4,0.9);border:1px solid rgba(218,165,32,0.1);border-radius:10px}
.panel-gold{background:linear-gradient(145deg,rgba(26,20,8,0.95),rgba(17,14,6,0.98));border:2px solid rgba(218,165,32,0.3);border-radius:14px;box-shadow:0 0 20px rgba(218,165,32,0.08)}

/* BUTTONS */
.btn-elder{background:linear-gradient(135deg,#8B6914 0%,#DAA520 50%,#8B6914 100%);color:#110e06;font-family:'Cinzel',serif;font-weight:700;padding:10px 24px;border-radius:8px;border:1px solid rgba(255,215,0,0.3);cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:1px;font-size:13px}
.btn-elder:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(218,165,32,0.4)}
.btn-elder:active{transform:translateY(0)}
.btn-elder:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.btn-dark{background:linear-gradient(135deg,rgba(26,20,8,0.9),rgba(40,30,15,0.9));color:#e0d0b0;font-family:'Cinzel',serif;font-weight:600;padding:8px 20px;border-radius:8px;border:1px solid rgba(218,165,32,0.2);cursor:pointer;transition:all .3s;font-size:12px}
.btn-dark:hover{border-color:rgba(218,165,32,0.5);background:rgba(40,30,15,0.95)}

.btn-blood{background:linear-gradient(135deg,#801020,#a01020);color:#f0e8d8;font-weight:600;padding:8px 20px;border-radius:8px;border:1px solid rgba(220,53,69,0.3);cursor:pointer;transition:all .3s;font-family:'Cinzel',serif;font-size:13px}
.btn-blood:hover{box-shadow:0 4px 15px rgba(160,16,32,0.4);transform:translateY(-1px)}

/* BARS */
.bar-container{height:18px;background:rgba(10,8,4,0.8);border:1px solid rgba(218,165,32,0.15);border-radius:4px;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:3px;transition:width .5s ease;position:relative}
.bar-fill::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(180deg,rgba(255,255,255,0.15),transparent);border-radius:3px 3px 0 0}
.bar-hp .bar-fill{background:linear-gradient(90deg,#600818,#dc3545)}
.bar-mp .bar-fill{background:linear-gradient(90deg,#1a1a8a,#4a6cf7)}
.bar-sta .bar-fill{background:linear-gradient(90deg,#2a5a1a,#4caf50)}
.bar-xp .bar-fill{background:linear-gradient(90deg,#8B6914,#FFD700)}
.bar-label{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,0.8);z-index:1}

/* RARITY COLORS */
.rarity-common{color:#c8c8c8;border-color:rgba(200,200,200,0.2)}.rarity-common .rarity-dot{background:#c8c8c8}
.rarity-uncommon{color:#4caf50;border-color:rgba(76,175,80,0.3)}.rarity-uncommon .rarity-dot{background:#4caf50}
.rarity-rare{color:#2196f3;border-color:rgba(33,150,243,0.3)}.rarity-rare .rarity-dot{background:#2196f3}
.rarity-epic{color:#9c27b0;border-color:rgba(156,39,176,0.3)}.rarity-epic .rarity-dot{background:#9c27b0}
.rarity-legendary{color:#ff9800;border-color:rgba(255,152,0,0.4)}.rarity-legendary .rarity-dot{background:#ff9800;box-shadow:0 0 8px rgba(255,152,0,0.5)}

/* ITEM SLOT */
.item-slot{background:rgba(10,8,4,0.6);border:1px solid rgba(218,165,32,0.12);border-radius:8px;padding:8px;cursor:pointer;transition:all .2s}
.item-slot:hover{border-color:rgba(218,165,32,0.4);background:rgba(26,20,8,0.8)}
.item-slot.equipped{border-color:rgba(218,165,32,0.5);background:linear-gradient(135deg,rgba(139,105,20,0.1),rgba(26,20,8,0.8))}

/* MONSTER CARD */
.monster-card{background:linear-gradient(145deg,rgba(20,14,6,0.9),rgba(10,8,4,0.95));border:1px solid rgba(218,165,32,0.12);border-radius:12px;overflow:hidden;transition:all .3s;cursor:pointer}
.monster-card:hover{border-color:rgba(160,16,32,0.5);transform:translateY(-2px);box-shadow:0 8px 25px rgba(160,16,32,0.15)}
.monster-card.boss{border-color:rgba(156,39,176,0.4);box-shadow:0 0 15px rgba(156,39,176,0.1)}

/* QUEST CARD */
.quest-card{background:linear-gradient(145deg,rgba(20,14,6,0.9),rgba(10,8,4,0.95));border:1px solid rgba(218,165,32,0.12);border-radius:12px;padding:16px;transition:all .3s}
.quest-card:hover{border-color:rgba(218,165,32,0.3)}
.quest-card.active{border-left:3px solid #DAA520}
.quest-card.ready{border-left:3px solid #4caf50;background:linear-gradient(145deg,rgba(20,24,6,0.9),rgba(10,12,4,0.95))}
.quest-card.completed{opacity:0.5;border-left:3px solid #666}

/* COMBAT */
.combat-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);z-index:50;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s}
.combat-panel{max-width:600px;width:95%;animation:scaleIn .3s}
.combat-log{max-height:200px;overflow-y:auto;scrollbar-width:thin}
.combat-log::-webkit-scrollbar{width:3px}
.combat-log::-webkit-scrollbar-thumb{background:rgba(218,165,32,0.2)}
.damage-flash{animation:damageFlash .4s}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(6px);z-index:50;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.modal-content{animation:scaleIn .3s}

/* MAP */
.zone-node{transition:all .3s;cursor:pointer}
.zone-node:hover{transform:scale(1.08);filter:brightness(1.2)}
.zone-node.current{animation:pulseGlow 2s infinite}
.zone-node.locked{opacity:0.35;cursor:not-allowed;filter:grayscale(0.5)}
.zone-connection{stroke:rgba(218,165,32,0.15);stroke-width:2}

/* INPUT */
.input-elder{background:rgba(10,8,4,0.8);border:2px solid rgba(218,165,32,0.2);border-radius:8px;padding:10px 14px;color:#f0e8d8;font-size:14px;transition:all .3s;outline:none;width:100%;font-family:'Inter',sans-serif}
.input-elder:focus{border-color:rgba(218,165,32,0.5);box-shadow:0 0 0 3px rgba(218,165,32,0.08)}
.input-elder::placeholder{color:rgba(200,176,128,0.3)}

/* TABS */
.tab-elder{padding:10px 16px;font-family:'Cinzel',serif;font-weight:600;font-size:12px;color:rgba(200,176,128,0.5);border-bottom:2px solid transparent;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:1px}
.tab-elder:hover{color:#e0d0b0}
.tab-elder.active{color:#DAA520;border-color:#DAA520}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,rgba(26,20,8,0.6) 25%,rgba(40,30,15,0.6) 50%,rgba(26,20,8,0.6) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}

/* TOOLTIP */
.game-tooltip{position:absolute;z-index:100;background:rgba(10,8,4,0.95);border:1px solid rgba(218,165,32,0.3);border-radius:8px;padding:12px;max-width:250px;font-size:12px;pointer-events:none;animation:fadeIn .15s}

/* DECORATIVE */
.border-ornate{position:relative}
.border-ornate::before,.border-ornate::after{content:'';position:absolute;width:30px;height:30px;border-color:rgba(218,165,32,0.3);border-style:solid}
.border-ornate::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-radius:8px 0 0 0}
.border-ornate::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-radius:0 0 8px 0}

.text-glow-gold{text-shadow:0 0 10px rgba(218,165,32,0.3)}
.divider-gold{height:1px;background:linear-gradient(90deg,transparent,rgba(218,165,32,0.3),transparent)}

/* RESPONSIVE */
@media(max-width:768px){
  .game-sidebar{display:none !important}
  .game-main{margin-left:0 !important}
  .mobile-bar{display:flex !important}
}
@media(min-width:769px){.mobile-bar{display:none !important}}