* { box-sizing: border-box; }
body { margin: 0; background: #020105; color: white; font-family: 'Quicksand', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }

.title-font { font-family: 'Cinzel', serif; letter-spacing: 2px; }
.glow-text { text-shadow: 0 0 10px #a29bfe, 0 0 25px #f8a5c2; }
.glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; box-shadow: 0 0 40px rgba(0,0,0,0.8); }

/* BÀN TRÒN & LAYOUT */
#game-board { position: relative; width: 1000px; height: 850px; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
#table-glow-ring { 
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    border: 2px solid rgba(162, 155, 254, 0.2); background: radial-gradient(circle, rgba(162, 155, 254, 0.05) 0%, transparent 70%);
    animation: ringRotate 20s linear infinite; filter: blur(2px);
}
@keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.player-card { position: absolute; width: 170px; padding: 20px; text-align: center; transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#pos-0 { bottom: 20px; transform: scale(1.1); }
#pos-1 { left: 20px; top: 45%; transform: translateY(-50%); }
#pos-2 { top: 20px; }
#pos-3 { right: 20px; top: 45%; transform: translateY(-50%); }

.player-card.active { border-color: #f8a5c2; filter: url(#bloom-fx); box-shadow: 0 0 50px rgba(248, 165, 194, 0.5); transform: scale(1.2); z-index: 100; }
#pos-1.active { transform: translateY(-50%) scale(1.2); }
#pos-3.active { transform: translateY(-50%) scale(1.2); }

/* HP RING (MÁU VÒNG) */
.hp-ring { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.hp-dot { width: 10px; height: 10px; border-radius: 50%; background: #f8a5c2; box-shadow: 0 0 12px #f8a5c2; transition: 0.5s; }
.hp-dot.lost { background: rgba(255,255,255,0.05); box-shadow: none; transform: scale(0.7); }

/* VẬT THỂ BAY (DREAMY ORB) */
.magical-orb {
    position: fixed; width: 45px; height: 45px; border-radius: 50%; pointer-events: none; z-index: 999;
    filter: url(#bloom-fx); box-shadow: 0 0 20px #fff;
}
.orb-trail {
    position: fixed; width: 25px; height: 25px; border-radius: 50%; opacity: 0.4; pointer-events: none;
}

/* TRUNG TÂM */
#center-table { z-index: 50; text-align: center; width: 500px; }
#bag-container { position: relative; width: 150px; height: 150px; margin: 0 auto; }
#bag-bloom { position: absolute; inset: 0; background: #a29bfe; filter: blur(50px); opacity: 0.2; border-radius: 50%; }
#bag-visual { font-size: 95px; animation: dreamyFloat 4s infinite ease-in-out; filter: drop-shadow(0 0 20px rgba(255,255,255,0.3)); }
@keyframes dreamyFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-25px) rotate(2deg); } }

/* UI OVERLAY */
#action-panel { margin-top: 20px; background: rgba(0,0,0,0.5); padding: 25px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.1); width: 450px; margin-left: auto; margin-right: auto; }
.item-btn { 
    width: 55px; height: 55px; background: rgba(255,255,255,0.03); border-radius: 18px; 
    border: 1px solid rgba(162, 155, 254, 0.4); font-size: 30px; cursor: pointer; transition: 0.3s;
    display: flex; align-items: center; justify-content: center; position: relative;
}
.item-btn:hover { background: rgba(162, 155, 254, 0.2); box-shadow: 0 0 20px #a29bfe; transform: translateY(-5px); }

/* SHOP SYSTEM */
#shop-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 500; display: flex; justify-content: center; align-items: center; }
.shop-content { width: 1000px; padding: 40px; }
.shop-tabs { display: flex; gap: 15px; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.shop-tab-btn { flex: 1; padding: 15px; background: transparent; border: none; color: #666; cursor: pointer; font-weight: bold; font-size: 16px; }
.shop-tab-btn.active { color: #f8a5c2; border-bottom: 3px solid #f8a5c2; }
.shop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-height: 50vh; overflow-y: auto; padding: 10px; }
.shop-item { padding: 20px; transition: 0.3s; }
.sub-category { grid-column: 1 / -1; text-align: left; color: #a29bfe; font-size: 18px; margin: 15px 0; border-left: 4px solid #a29bfe; padding-left: 10px; }

.magic-btn { background: linear-gradient(135deg, #a29bfe, #6c5ce7); border: none; padding: 12px 25px; color: white; border-radius: 30px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.magic-btn:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(162, 155, 254, 0.6); }

#log-box { margin-top: 15px; font-weight: 700; font-size: 18px; color: #f1f2f6; text-shadow: 0 2px 10px #000; }
.hidden { display: none !important; }