* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, rgba(119, 76, 254, 0.22), transparent 25%), radial-gradient(circle at 20% 20%, rgba(255, 143, 165, 0.18), transparent 18%), #05040d; color: white; font-family: 'Quicksand', sans-serif; display: flex; justify-content: center; align-items: center; height: 100dvh; overflow: hidden; }

body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%), radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), transparent 20%); pointer-events: none; z-index: 1; }

.title-font { font-family: 'Cinzel', serif; letter-spacing: 2px; text-transform: uppercase; }
.glow-text { text-shadow: 0 0 12px #a29bfe, 0 0 35px #f8a5c2; }
.hidden { display: none !important; }
#tsparticles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

.glass-panel { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(28px); border: 1px solid rgba(248,165,194,0.14); border-radius: 32px; box-shadow: 0 0 80px rgba(109, 76, 255, 0.18), inset 0 0 25px rgba(255,255,255,0.08); }

/* --- BUTTONS --- */
.magic-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 84px; background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); border: 1px solid rgba(255,255,255,0.2); padding: 12px 25px; color: white; font-family: 'Quicksand'; font-weight: bold; border-radius: 30px; cursor: pointer; transition: 0.3s; box-shadow: 0 10px 20px rgba(0,0,0,0.3); position: relative; z-index: 2; box-sizing: border-box; pointer-events: auto; touch-action: manipulation; }
.magic-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 15px 30px rgba(162, 155, 254, 0.6); }
.magic-btn.variant { background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%); }
.magic-btn:disabled { background: #333; cursor: not-allowed; transform: none; box-shadow: none; color:#888; border: none; }
.big-btn { padding: 15px 40px; font-size: 18px; }

/* --- AUTH & LOBBY --- */
.screen-container { position: absolute; z-index: 500; display: flex; flex-direction: column; align-items: center; padding: 40px; border-radius: 30px; text-align: center; width: 550px; transition: 0.5s; }
#auth-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 600; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s; }
#auth-modal.fade-out { opacity: 0; pointer-events: none; transform: scale(1.1); }
.auth-content { width: 100%; }

.auth-tabs { display: flex; width: 100%; margin-bottom: 20px; background: rgba(0,0,0,0.4); border-radius: 15px; padding: 5px; }
.tab-btn { flex: 1; background: transparent; border: none; color: #aaa; padding: 12px; cursor: pointer; font-weight: bold; transition: 0.3s; }
.tab-btn.active { background: rgba(248, 165, 194, 0.2); color: #f8a5c2; border-radius: 10px; }
.glass-input { width: 100%; padding: 15px; margin-bottom: 15px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 15px; color: white; font-size: 16px; outline: none; transition: 0.3s; }
.glass-input:focus { border-color: #f8a5c2; box-shadow: 0 0 15px rgba(248, 165, 194, 0.3); }
.error-msg { color: #ff7675; font-size: 14px; margin-bottom: 15px; text-shadow: 0 0 5px rgba(255, 118, 117, 0.5); }
.divider { display: flex; align-items: center; width: 100%; margin: 20px 0; color: #aaa; } 
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(255,255,255,0.1); } 
.divider span { padding: 0 10px; font-size: 14px; }
#lobby-screen, #waiting-room-screen { width: 650px; }
#player-wallet { position: fixed; top: 20px; right: 30px; z-index: 1000; display: flex; align-items: center; gap: 15px; font-size: 18px; background: rgba(0,0,0,0.6); padding: 10px 25px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(15px); }

/* --- 3D BOARD --- */
#game-board { position: relative; width: 100%; height: 100%; perspective: 1200px; display: flex; justify-content: center; align-items: center; }
#perspective-wrapper { position: relative; width: 1000px; height: 850px; transform: rotateX(25deg); transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; }

#table-3d-glow { position: absolute; width: 750px; height: 750px; border-radius: 50%; border: 2px solid rgba(162, 155, 254, 0.15); background: radial-gradient(circle, rgba(162, 155, 254, 0.16) 0%, transparent 65%); animation: ringRotate 25s linear infinite; filter: blur(2px); }
@keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.player-card { position: absolute; width: 190px; padding: 24px 18px; text-align: center; transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; background: rgba(10, 7, 30, 0.72); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 0 30px rgba(127, 73, 255, 0.08); backdrop-filter: blur(12px); }
.player-card::before { content: ''; position: absolute; inset: 0; border-radius: 26px; background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 60%); opacity: 0.35; pointer-events: none; }
#pos-0 { bottom: 0; transform: translateZ(60px) scale(1.1); }
#pos-1 { left: 0; top: 45%; transform: translateY(-50%) rotateY(20deg) translateZ(40px); }
#pos-2 { top: 0; transform: rotateX(-8deg) translateZ(20px); }
#pos-3 { right: 0; top: 45%; transform: translateY(-50%) rotateY(-20deg) translateZ(40px); }
.player-card.active { border-color: #f8a5c2; filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.35)); box-shadow: 0 0 80px rgba(248, 165, 194, 0.45), inset 0 0 20px rgba(255,255,255,0.08); transform: translateZ(110px) scale(1.18) !important; }
.player-card.sleeping { opacity: 0.35; filter: grayscale(100%) blur(1.8px); pointer-events: none; }

.hp-ring { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.hp-dot { width: 13px; height: 13px; border-radius: 50%; background: #f8a5c2; box-shadow: 0 0 14px #f8a5c2; transition: 0.5s; }
.hp-dot.lost { background: rgba(255,255,255,0.08); box-shadow: none; transform: scale(0.75); }
.status-fx { position: absolute; top: 10px; right: 10px; font-size: 22px; filter: drop-shadow(0 0 14px gold); }

/* --- TÂM BÀN --- */
#center-zone { z-index: 50; text-align: center; width: 500px; transform-style: preserve-3d; }
#bag-container { position: relative; width: 160px; height: 160px; margin: 0 auto; cursor: pointer; border-radius: 50%; overflow: hidden; }
#bag-container::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(248, 165, 194, 0.2), transparent 45%); opacity: 0.75; pointer-events: none; }
#bag-glow { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(162, 155, 254, 0.12) 35%, transparent 70%); filter: blur(40px); opacity: 0.33; border-radius: 50%; }
#bag-visual { position: relative; z-index: 2; font-size: 100px; animation: dreamyFloat 4s infinite ease-in-out; filter: drop-shadow(0 0 40px rgba(255,255,255,0.85)); }
#bag-container:hover #bag-visual { transform: scale(1.05); }
@keyframes dreamyFloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-35px) rotate(4deg); } }
#stars-count { font-size: 16px; margin-top: 15px; color: #d1c4e9; letter-spacing: 1px; text-shadow: 0 0 10px rgba(170, 183, 255, 0.6); }
#dmg-tag { font-size: 28px; font-weight: 900; color: #ff7675; text-shadow: 0 0 18px #ff4757; margin-top: 5px; }

#bag-container.bag-hot { animation: bagGlowPulse 1.2s ease-in-out infinite; }
@keyframes bagGlowPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* --- CÔNG NGHỆ HIGH-END VFX --- */
.magical-orb { position: fixed; width: 48px; height: 48px; border-radius: 50%; pointer-events: none; z-index: 999; filter: url(#super-glow); box-shadow: 0 0 25px #fff; background: radial-gradient(circle at 30% 30%, #fff, currentColor); }
.orb-trail { position: fixed; width: 32px; height: 32px; border-radius: 50%; opacity: 0.5; pointer-events: none; z-index: 998; }

/* Tia Năng Lượng (Energy Beam & Lightning) */
.energy-beam { position: fixed; height: 12px; transform-origin: left center; z-index: 998; pointer-events: none; border-radius: 10px; background: currentColor; box-shadow: 0 0 20px currentColor, 0 0 40px #fff; }
.energy-beam.lightning { filter: url(#lightning-fx) url(#super-glow); height: 18px; }

/* Vòng Tròn Phép Thuật (Magic Circle) */
.magic-circle { position: fixed; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; z-index: 50; border: 4px dashed currentColor; box-shadow: 0 0 30px currentColor inset, 0 0 30px currentColor; animation: spinCircle 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards; transform: translate(-50%, -50%) rotateX(60deg); }
@keyframes spinCircle { 0% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg) scale(1.5); opacity: 0; } }

.vfx-ring { position: fixed; width: 180px; height: 180px; border-radius: 50%; border: 3px solid currentColor; pointer-events: none; opacity: 0.85; z-index: 55; box-shadow: 0 0 40px currentColor; transform: translate(-50%, -50%) scale(0); animation: ringPulse 0.9s ease-out forwards; }
@keyframes ringPulse { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.75; } 100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }

.vfx-star { position: fixed; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 1005; box-shadow: 0 0 16px currentColor; opacity: 0.95; animation: starFlicker 0.7s ease-out forwards; }
@keyframes starFlicker { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

.bag-glow-effect { box-shadow: 0 0 30px rgba(248,165,194,0.95), inset 0 0 25px rgba(255,255,255,0.4); }
.bag-pulse { animation: bagHeartbeat 1.4s ease-in-out infinite; }
@keyframes bagHeartbeat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.05); } }

.player-card.vfx-tilt { will-change: transform; }

.shop-item.vfx-float:hover { transform: translateY(-10px) scale(1.02); }

/* Skin Animation Keyframes */
@keyframes shimmer { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.7; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes bubble { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes refract { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(10deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes swirl { 0% { transform: translateX(-50%) rotate(0deg); } 100% { transform: translateX(-50%) rotate(360deg); } }
@keyframes sway { 0%, 100% { transform: translateX(-50%) rotate(0deg); } 50% { transform: translateX(-50%) rotate(2deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- UI OVERLAY --- */
/* --- UI OVERLAY --- */
#ui-overlay { 
    position: absolute; 
    bottom: 40px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    pointer-events: none; /* Khung ngoài cho xuyên chuột */
    z-index: 1000; /* Kéo UI lên trên cùng để không bị bảng game che mất */
}
#action-panel { 
    pointer-events: auto;
    position: relative;
    z-index: 1001;
    background: rgba(0,0,0,0.75); 
    padding: 30px; 
    border-radius: 40px; 
    border: 1px solid rgba(255,255,255,0.1); 
    width: 500px; 
    box-shadow: 0 0 60px rgba(0,0,0,1); 
    /* ĐÃ XÓA: transform: translateZ(200px); */
    margin-left: auto; 
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#action-panel button { box-sizing: border-box; z-index: 1001; position: relative; pointer-events: auto; }

.items-row { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; flex-wrap: wrap; align-items: flex-start; position: relative; z-index: 11; padding-bottom: 10px; }
.item-btn { width: 58px; height: 58px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), transparent 50%), rgba(255,255,255,0.04); border-radius: 22px; border: 1px solid rgba(162, 155, 254, 0.32); font-size: 32px; cursor: pointer; transition: 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; flex-shrink: 0; z-index: 11; pointer-events: auto; }
.item-btn::before { content: ''; position: absolute; inset: 0; border-radius: 22px; box-shadow: inset 0 0 20px rgba(255,255,255,0.08); pointer-events: none; }
.item-btn:hover { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.24), transparent 45%), rgba(255,255,255,0.08); box-shadow: 0 0 28px rgba(162,155,254,0.45); transform: scale(1.08); }
.item-btn[data-item='mirror'] { border-color: #85ecd8; }
.item-btn[data-item='prism'] { border-color: #f6e58d; }
.item-btn[data-item='tea'] { border-color: #ff7675; }
.item-btn[data-item='wind'] { border-color: #74b9ff; }
.item-btn[data-item='silk'] { border-color: #a29bfe; }
.item-btn[data-item='chime'] { border-color: #fd79a8; }
.item-btn .tooltip { position: absolute; bottom: calc(100% + 12px); font-size: 11px; background: rgba(6,6,15,0.94); padding: 10px; border-radius: 10px; border: 1px solid rgba(162,155,254,0.45); color: white; visibility: hidden; width: 160px; text-align: center; left: 50%; transform: translateX(-50%); z-index: 100; pointer-events: none; white-space: normal; line-height: 1.3; }
.item-btn:hover .tooltip { visibility: visible; }

.target-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 15px; position: relative; z-index: 5; }

#target-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 15px; position: relative; z-index: 5; pointer-events: auto; width: 100%; }
#target-buttons button { min-width: 140px; padding: 12px 20px; z-index: 5; position: relative; pointer-events: auto; }
#target-buttons button.magic-btn { flex: 0 1 auto; box-sizing: border-box; z-index: 5; pointer-events: auto; }

.target-btn { font-size: 13px; padding: 10px 20px; }

#log-box { margin-top: 20px; font-weight: 700; font-size: 20px; color: #f1f2f6; text-shadow: 0 2px 15px #000; animation: logFade 0.5s ease-out; background: rgba(4,4,12,0.75); padding: 15px 30px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12); pointer-events: auto; }
@keyframes logFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- SHOP SYSTEM --- */
#shop-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 600; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s; }
.shop-content { width: 1000px; padding: 40px; border: 2px solid rgba(248, 165, 194, 0.3); border-radius: 30px; }
.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; transition: 0.3s; text-transform: uppercase; }
.shop-tab-btn.active { color: #f8a5c2; border-bottom: 3px solid #f8a5c2; text-shadow: 0 0 10px #f8a5c2; }
.shop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-height: 50vh; overflow-y: auto; padding: 10px; }
.shop-grid::-webkit-scrollbar { width: 6px; } 
.shop-grid::-webkit-scrollbar-thumb { background: #f8a5c2; border-radius: 10px; }
 .shop-item { position: relative; background: radial-gradient(circle at top, rgba(248,165,194,0.14), transparent 45%), rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); padding: 22px 18px; border-radius: 24px; transition: 0.35s ease, transform 0.35s ease; text-align: center; overflow: hidden; }
.shop-item::after { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(45deg, rgba(255,255,255,0.08), transparent 50%); opacity: 0.45; pointer-events: none; }
.shop-item:hover { border-color: #f8a5c2; background: rgba(248, 165, 194, 0.10); transform: translateY(-12px) scale(1.01); box-shadow: 0 0 30px rgba(248,165,194,0.18); }
.item-icon { font-size: 44px; margin-bottom: 12px; filter: drop-shadow(0 0 14px rgba(255,255,255,0.22)); }
.shop-item h3 { margin: 5px 0; font-size: 15px; color: #fff; }
.buy-btn { width: 100%; padding: 12px; font-size: 13px; margin-top: 10px; } 
.buy-btn.equipped { background: #2ecc71; border-color: #27ae60; pointer-events: none; }
/* --- MOBILE & TABLET RESPONSIVE --- */
@media (max-width: 1024px) {
    .screen-container { width: 90%; max-width: 480px; padding: 30px 20px; }
    #lobby-screen, #waiting-room-screen { width: 90%; max-width: 480px; }
    #perspective-wrapper { width: 90vw; height: 70vh; max-width: 700px; max-height: 600px; transform: rotateX(15deg) scale(0.9); }
    #table-3d-glow { width: 60vw; height: 60vw; max-width: 500px; }
    .player-card { width: 140px; padding: 16px 12px; font-size: 14px; }
    .player-card .p-name { font-size: 12px; }
    .hp-dot { width: 9px; height: 9px; }
    #bag-container { width: 120px; height: 120px; }
    #bag-visual { font-size: 80px; }
    #stars-count { font-size: 14px; }
    #dmg-tag { font-size: 22px; }
    #player-wallet { top: 10px; right: 10px; font-size: 14px; gap: 8px; padding: 8px 15px; }
    #action-panel { width: 90%; max-width: 400px; padding: 20px; }
    .magic-btn { min-height: 40px; min-width: 80px; padding: 10px 20px; font-size: 13px; }
    .item-btn { width: 50px; height: 50px; font-size: 28px; }
    .shop-content { width: 95%; padding: 20px; }
    .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (max-width: 768px) {
    body { font-size: 14px; }
    .title-font { font-size: 18px; letter-spacing: 1px; }
    .glow-text { text-shadow: 0 0 8px #a29bfe, 0 0 20px #f8a5c2; }
    
    .screen-container { width: 95%; max-width: 360px; padding: 25px 18px; }
    .glass-input { padding: 12px; font-size: 14px; }
    .tab-btn { padding: 10px; font-size: 12px; }
    #lobby-screen, #waiting-room-screen { width: 95%; max-width: 360px; }
    #lobby-screen p { font-size: 13px; }
    
    #game-board { justify-content: center; align-items: flex-start; padding-top: 10px; }
    #perspective-wrapper { width: 100%; height: auto; max-width: 500px; aspect-ratio: 1; transform: rotateX(10deg) scale(0.8); }
    #table-3d-glow { width: 50vw; height: 50vw; max-width: 400px; }
    
    .player-card { width: 110px; padding: 12px 8px; font-size: 12px; border-radius: 18px; }
    .player-card .p-name { font-size: 10px; margin: 4px 0; }
    .hp-ring { margin-bottom: 8px; gap: 4px; }
    .hp-dot { width: 7px; height: 7px; }
    .status-fx { font-size: 16px; }
    
    #center-zone { width: 100%; }
    #bag-container { width: 100px; height: 100px; }
    #bag-visual { font-size: 60px; }
    #round-indicator { font-size: 16px; }
    #stars-count { font-size: 12px; }
    #dmg-tag { font-size: 18px; }
    
    #player-wallet { top: 8px; right: 8px; font-size: 12px; gap: 6px; padding: 6px 12px; border-radius: 30px; }
    #open-shop-btn, #btn-logout { font-size: 11px; padding: 6px 12px; }
    
    #ui-overlay { bottom: 10px; }
    #action-panel { width: 95%; max-width: 350px; padding: 16px; border-radius: 24px; gap: 8px; }
    
    .items-row { gap: 8px; margin-bottom: 12px; }
    .item-btn { width: 45px; height: 45px; font-size: 24px; border-radius: 16px; }
    .item-btn::before { box-shadow: inset 0 0 10px rgba(255,255,255,0.06); }
    .item-btn .tooltip { font-size: 10px; width: 140px; bottom: calc(100% + 6px); }
    
    #target-buttons { gap: 6px; margin-top: 10px; }
    .magic-btn { min-height: 40px; min-width: 70px; padding: 9px 16px; font-size: 12px; border-radius: 24px; }
    .magic-btn:hover { transform: scale(1.03); }
    .big-btn { padding: 12px 24px; font-size: 14px; }
    
    #log-box { margin-top: 12px; font-size: 13px; padding: 10px 16px; border-radius: 16px; }
    
    /* Shop modal */
    #shop-modal { padding: 10px; }
    .shop-content { width: 98%; max-width: 360px; padding: 16px; border-radius: 20px; }
    .shop-tabs { gap: 8px; margin-bottom: 16px; }
    .shop-tab-btn { padding: 10px; font-size: 11px; }
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 60vh; }
    .shop-item { padding: 12px; border-radius: 16px; }
    .item-icon { font-size: 32px; margin-bottom: 8px; }
    .shop-item h3 { font-size: 12px; }
    .buy-btn { padding: 8px; font-size: 11px; }
    .sub-category { font-size: 12px; }
    
    /* Auth modal */
    #auth-modal { padding: 20px; }
    .auth-tabs { margin-bottom: 16px; padding: 3px; }
    .divider { margin: 16px 0; }
    .divider span { font-size: 12px; }
}

@media (max-width: 480px) {
    .screen-container { width: 98%; max-width: 340px; padding: 20px 15px; border-radius: 20px; }
    .glass-input { padding: 11px; font-size: 13px; margin-bottom: 12px; }
    
    #game-board { padding-top: 5px; }
    #perspective-wrapper { transform: rotateX(5deg) scale(0.75); }
    
    .player-card { width: 90px; padding: 10px 6px; font-size: 11px; }
    .player-card .p-name { font-size: 9px; }
    .hp-dot { width: 6px; height: 6px; }
    
    #bag-container { width: 80px; height: 80px; }
    #bag-visual { font-size: 48px; }
    
    #player-wallet { display: none; }
    
    #action-panel { width: 98%; max-width: 320px; padding: 12px; }
    .item-btn { width: 40px; height: 40px; font-size: 20px; }
    .magic-btn { min-height: 36px; min-width: 60px; padding: 8px 14px; font-size: 11px; }
    
    .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .shop-content { width: 98%; max-width: 320px; padding: 12px; }
    
    #log-box { font-size: 12px; padding: 8px 12px; }
}

@media (hover: none) and (pointer: coarse) {
    .magic-btn:hover { transform: none; }
    .item-btn:hover { transform: scale(1); }
    .shop-item:hover { transform: none; }
    .magic-btn:active { transform: scale(0.97); }
    .item-btn:active { transform: scale(0.95); }
}

/* --- GAME OVER MODAL --- */
#game-over-modal { animation: modalFadeIn 0.4s ease-out; }

#game-over-modal.hidden { display: none !important; }

#game-over-modal > div { animation: modalPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes modalPop { from { transform: scale(0.8) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

#game-over-modal > div { 
    padding: 50px 40px !important; 
    text-align: center !important; 
    max-width: 450px !important; 
    border-radius: 40px !important; 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important; 
    border: 2px solid rgba(248, 165, 194, 0.3) !important; 
    box-shadow: 0 0 80px rgba(248, 165, 194, 0.25), inset 0 0 30px rgba(255, 255, 255, 0.1) !important; 
}

#winner-text { 
    font-size: 36px !important; 
    margin-bottom: 25px !important; 
    letter-spacing: 3px !important; 
}

#reward-text { 
    margin: 20px 0 30px 0 !important; 
    font-size: 18px !important;
}

#game-over-modal button { 
    width: 100% !important; 
    margin-bottom: 12px !important; 
    font-size: 16px !important; 
    padding: 14px 20px !important; 
}

#game-over-modal button:last-child { 
    margin-bottom: 0 !important; 
}

#btn-play-again { 
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important; 
    border: 1px solid rgba(46, 204, 113, 0.4) !important;
}

#btn-play-again:hover { 
    box-shadow: 0 15px 35px rgba(46, 204, 113, 0.6) !important; 
}

#btn-end-leave { 
    background: linear-gradient(135deg, #4b6cb7, #182848) !important; 
}